JavaScript通过动画滚动到div [英] JavaScript scroll to div with animation

问题描述

我有一个PhoneGap应用程序，当它打开一个HTML页面时，我希望它滚动到特定的< div> 元素。到目前为止，我已经能够通过使用jQuery的脚本来实现这一点：

I have a PhoneGap application that when it opens an HTML page, I want it to scroll to a specific <div> element. So far I've been able to make it do that with this script using jQuery:

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

这只会让我跳转到< div> 看起来有点波涛汹涌。

This only gives me a jump directly to the <div> which looks a bit choppy.

有没有什么方法可以给这个动画带来流畅性？

Is there any way to give this a smooth animation?

推荐答案

您可以执行以下操作：

You can do the following:

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/

jsfiddle/example: http://jsfiddle.net/dtR34/4/

这篇关于JavaScript通过动画滚动到div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！