javascript - mcustomscrollbar并滚动到相应的部分

Here is my fiddle

(function($){
    $(window).load(function(){
        $(".sections").mCustomScrollbar({theme:"light-3"});
    });
    jQuery("ul.subMenu li a").each(function(){
        jQuery(this).click(function(){
            $thisId = jQuery(this).attr('href');
            $('html,body').animate({scrollTop: $thisId.offset().top}, 'fast');
        });
    });
})(jQuery);

我正在使用mCustomScrollbar，当您单击每个链接时，它应该滚动到相应的部分。但是现在它只是跳转到单击部分而没有滚动，我用动画功能编写了滚动但没有成功。

最佳答案

经过一番摆弄之后，我可以使用自动滚动功能了，但是我不得不禁用mCustomScrollbar，这显然不理想。由于某些原因，mCustomScrollbar似乎会干扰jQuery的.animate()。

所以我去寻找mCustomScrollbar中的.animate()等效项，发现了这一点：


  scrollTo
  
  用法$（selector）.mCustomScrollbar（“ scrollTo”，position，options）;
  
  调用scrollTo方法以编程方式将内容滚动到位置参数（demo）。


mCustomScrollbar documentation: scrollTo

从那里开始，只需要重写一下：

(function(){

    $(window).load(function(){
        $(".sections").mCustomScrollbar({theme:"light-3"});
    });

    // container ref
    var sections = $('.sections');

    $("ul.subMenu li a").each(function(){

        // link ref
        var link = $(this);

        // section ref
        var section = $(link.attr('href'));

        link.click(function(){

            sections.mCustomScrollbar("scrollTo", section.position().top, {

                // scroll as soon as clicked
                timeout:0,

                // scroll duration
                scrollInertia:200,
            });

            // disable original jumping
            return false;
        });
    });
})();

笔记


200ms是jQuery的fast中的.animate()预设的持续时间。
jQuery documentation: .animate() duration
我们滚动.sections元素而不是文档。


演示版

mCustomScrollbar's scrollTo on jsfiddle