标签内容的自举滚动效果

Question

I am using bootstrap content tab with scroll effect on mobile view.

In desktop view it is normal tab structure but when it is viewed on smaller screens, clicking on tabs it should scroll to the respective content panel.

In my demo you can see that scroll works on second time click but not on first click. Any idea what I am missing?

Need to get the scroll effect on first click itself.

$('.tabs-right>li a').on('click', function (e) {
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 'slow');
        e.preventDefault();
    });

Updated DEMO

Answer 1

You are handling click events on the same a elements here that bootstrap uses to trigger changing tabs in the first place, and that seems to interfere here.

Use the events the tabs plugin provides instead to trigger you scrolling animation:

$('.tabs-right>li a').on('shown.bs.tab', function (e) {
        var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 'slow');
})

https://jsfiddle.net/b3nhjvot/220/

Answer 2

您的代码没有问题，但是使用最新版本的jQuery（3.1.1），那么它就可以正常工作了:)玩得开心

JS Fiddle: https://jsfiddle.net/arifkarim/b3nhjvot/209/