mcustomscrollbar并滚动到相应的部分

Question

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，当您点击每个链接时，它应该滚动到相应的部分。但是现在它只是跳到点击的部分没有滚动，我用动画功能滚动但没有成功。

Answer 1

经过一些摆弄后，我让自动滚动工作但我不得不禁用 mCustomScrollbar ，显然不太理想。出于某种原因， mCustomScrollbar 似乎会干扰 jQuery 的.animate()。

所以我在 mCustomScrollbar 中寻找相当于.animate()的内容，发现了这个：

  

<强> scrollTo

     

用法 $（选择器）.mCustomScrollbar（＆＃34; scrollTo＆＃34;，位置，选项）;

     

调用 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;
        });
    });
})();

备注

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

演示

mCustomScrollbar's scrollTo on jsfiddle