用轻松的动画代替滚动

Question

I have been trying hard to replace the default $(window).scroll() behavior with beautiful easing animation. But no luck so far. Following is my code.

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

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

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

});

But this is not working. It simply scrolls 1-3 pixels only and very slow.

If i change it to $('html, body').animate({scrollTop:500}, 50,'easeInElastic'); it just does it once and thats not what i want.

I want the replace the standard scroll behavior with easing animation when user presses the scroll-bar buttons.

JSFiddle link http://jsfiddle.net/bfDrp/

Answer 1

Take a look at this plugin:

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

Here is implemintation:

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

Answer 2

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

window.scrollTo(0,150,500);