javascript - 用缓动动画代替滚动

Question

我一直在努力$(window).scroll()用漂亮的缓动动画替换默认行为。但到目前为止还没有运气。以下是我的代码。

$(window).scroll(function(e){
    e.preventDefault();

    var cp=$(window).scrollTop(); // current scroll position

    //animate with custom easing
    $('html, body').animate({scrollTop:cp}, 50,'easeInElastic');

});

但这不起作用。它仅滚动 1-3 个像素，而且速度非常慢。

如果我把它改成它$('html, body').animate({scrollTop:500}, 50,'easeInElastic'); 只做一次，那不是我想要的。

当用户按下滚动条按钮时，我希望用缓动动画替换标准滚动行为。

JSFiddle 链接http://jsfiddle.net/bfDrp/

Answer 1

看看这个插件：

http://manos.malihu.gr/jquery-custom-content-scroller/

这是实施：

<script>
(function($){
    $(document).ready(function(){
        $("body").mCustomScrollbar();
    });
})(jQuery);

Answer 2

在该位置使用 .scrollTo 函数，您也可以在窗口中使用 scrollX 和 scrollY。

window.scrollTo(0,150,500);