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> ，看起来有些不稳定。

有没有办法给这个平滑的动画？

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 / example： http ： //jsfiddle.net/dtR34/4/

Answer 2

像这样做：

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

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>