2

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

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

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

4

5 回答 5

3

我认为你最好的选择是easing利用.animate()

从文档中：

缓和

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

$(".upp").click(function(){
    $('html, body').animate({scrollTop: '0px'}, 1200, 'linear');
});
于 2013-08-06T11:26:32.013 回答
1

这不是缓动或动画问题。

平滑度将取决于您的内容。而已。

如果您有图像重的网站，滚动会很痛苦。图像背景...甚至不要考虑许多高质量的固定图像背景和平滑滚动...浏览器不能很好地处理。

我发现的唯一解决方法是完全废弃滚动并通过更改容器的边距自己实现一个假的。使用 CSS3 过渡，即使对于繁重的网站也通常是平滑的。但这通常不值得麻烦......

更新

如果剥离图像后仍然很慢，那么问题显然出在您的视差代码中。看看瓶颈。找出导致延迟的帧。看看能不能稍微优化一下代码。减少对 DOM 的引用？也许缓存一些元素？简化一些数学？

于 2013-08-06T11:27:25.280 回答
1

尝试这个：

 $('html, body').animate({ scrollTop: $('.docs').offset().top}, 2000);
于 2013-08-06T11:29:14.270 回答
0

你应该使用 CSS3 过渡：{original DEMO site: http://mitgux.com/demo/smooth-scroll-to-top-using-css3-animations/index.php }

演示

$('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");
    });
});
于 2013-08-06T11:38:05.710 回答
-2

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

$('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/

于 2013-08-06T11:25:48.350 回答