javascript - 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

Usage $(selector).mCustomScrollbar("scrollTo",position,options);

Call the scrollTo method to programmatically scroll the content to the position parameter (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 的 .animate() 中预设的 fast 的持续时间。
  jQuery documentation: .animate() duration
• 我们滚动 .sections 元素而不是文档。

演示

mCustomScrollbar's scrollTo on jsfiddle