将滚动替换为缓动动画

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 link 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 并用窗口滚动Y。

window.scrollTo(0,150,500);