Question

我正在使用此脚本滚动到顶部按钮：

$(document).ready(function(){
    $(".upp").click(function(){
        $('html, body').animate({scrollTop: '0px'}, 1200);
    });
});

它会在动画时达到顶峰，但动画不够平滑。在某些部分跳跃，然后滑到顶部。我甚至尝试将值从1200增加到5000，但它在某些点跳跃时滚动。我正在使用简单的jquery库（最新版本）。你认为添加jquery UI会解决任何问题吗？请帮忙。

Answer 1

我认为您最好的选择是使用easing

的.animate()选项

From the documentation：

<强>缓解


.animate()的剩余参数是一个命名要使用的缓动函数的字符串。缓动函数指定动画在动画中的不同点处进行的速度。 jQuery库中唯一的缓动实现是默认的，称为swing，并且以恒定的速度进行，称为linear。使用插件可以使用更多的缓动功能，最值得注意的是jQuery UI suite。

$(".upp").click(function(){
    $('html, body').animate({scrollTop: '0px'}, 1200, 'linear');
});

Answer 2

这不是缓和或动画问题。

顺畅度取决于您的内容。而已。

如果你有图片重的网站，滚动将是一个痛苦。图像背景......甚至不考虑许多高质量的固定图像背景和平滑滚动...浏览器处理得不好。

我找到的唯一解决方法是完全废弃卷轴并通过更改容器的边距自行实施假卷轴。使用CSS3过渡通常即使对于重型站点也是平滑的。但这通常不值得麻烦......

<强>更新

如果在剥离图像后它仍然很慢，那么问题显然在你的视差代码中。看看瓶颈。找出导致延迟的帧。看看你是否可以优化代码。少参考DOM？也许缓存一些元素？简化一些数学？

Answer 3

试试这个：

 $('html, body').animate({ scrollTop: $('.docs').offset().top}, 2000);

Answer 4

您应该使用CSS3转换：{原始DEMO网站：http://mitgux.com/demo/smooth-scroll-to-top-using-css3-animations/index.php}

DEMO

$('a').click(function (e) {
    e.preventDefault();
    $("body").css({
      "margin-top": -$(this).offset().top+"px",
      "overflow-y": "scroll", // This property is posed for fix the blink of the window width change 
    });
    $(window).scrollTop(0);
    $("body").css("transition", "margin-top 1.2s ease");
    $("body").css("margin-top", "0");
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function () {
        // Remove the transition property
        $("body").css("transition", "none");
    });
});

Answer 5

这将帮助您进行平滑滚动：

$('a').click(function() {

    //For testing moving the scroller to the top
    $('div').scrollTop(0);

    //Scroll to bottom
    $('div').animate({scrollTop: $('div').get(0).scrollHeight}, 3000);

   //Prevent Default
   return false;
});

演示：http://jsfiddle.net/codebombs/GjXzD/

滚动到顶部不够平滑

5 个答案: