JavaScript 滚动到带有动画的 div

Question

我有一个 PhoneGap 应用程序，当它打开一个 HTML 页面时，我希望它可以滚动到特定的 <div> 元素。迄今为止，我已经使用 jQuery 编写了以下脚本来实现这一点：

<script>
$(document).delegate('.ui-page', 'pageshow', function () {
     var offset = $(this).find('#timeindicatordiv').offset().top;
     setTimeout(function () {
        $.mobile.silentScroll(offset);
        }, 0);
     });
</script>

这只会直接跳转到看起来有点突兀的<div>，有没有办法使其具有平滑的过渡动画？

- Luddig

---

你尝试过这个插件吗：http://plugins.jquery.com/Scrollorama/? - Tomer

Answer 1

你可以做以下事情：

var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 600;
    $('html,body').animate({
        scrollTop: $(el).offset().top
    }, speed);
}

// specify id of element and optional scroll speed as arguments
scrollToElement('#timeindicatordiv', 600);

jsfiddle示例：http://jsfiddle.net/dtR34/4/

- kyle.stearns

---

这个很好用，但它总是滚动到底部。我该如何控制它滚动的距离？ - Luddig

@LudwigKristoffersson，你需要将要滚动到的元素的id传递给scrollToElement函数。在我给你的示例中，#timeindicatordiv元素位于页面底部，因此正在滚动到该元素。 - kyle.stearns

你之前的回答看起来更好，我认为 :) - Luddig

我已经回滚了并在fiddle中提供了一个示例！ - kyle.stearns

Answer 2

像这样做：

$("html,body").animate({scrollTop: offset}, 600);

- Nelson

Answer 3

$('.click').click(function(l){
   // prevent default action

   l.preventDefault();

   scrollToElement( $(this).attr('href'), 2000 );
});

var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 2000;
    $('html,body').animate({
        scrollTop: $(el).offset().top
    }, speed);
}

div {
    margin-top:1000px;
}
div:last-child {
    padding-bottom:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#link1" class="click">link 1</a><br />
<a href="#link2" class="click">link 2</a><br />
<a href="#link3" class="click">link 3</a><br />


<div id="link1">Link 1</div>
<div id="link2">Link 2</div>
<div id="link3">Link 3</div>

- Shrikant Gangamwar

---

请考虑在您的代码中包含解释说明。虽然代码可以解决问题，但仅有代码的答案通常对更广泛的公众不太有用。 - Antimony