自定义滚动条和滚动到相应的部分

Question

这是我的小提琴

(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中寻找类似于mCustomScrollbar的内容，并发现如下：

scrollTo $(选择器).mCustomScrollbar(“scrollTo”，位置、选项)； 以编程方式调用scrollTo方法，将内容滚动到position参数(演示)。

mCustomScrollbar文档: 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 is是jQuery的fast .animate()预置的持续时间。 jQuery文档：.animate()持续时间
• 我们滚动.sections元素而不是文档。

演示

jsfiddle上的mCustomScrollbar scrollTo