如何平滑地从另一个标签页滚动到另一个标签页？

Question

我有一个标签式菜单，标签式菜单中的一个页面有一个 link 需要转到另一个标签页。

如何做到这一点？我尝试了平滑滚动，但它不起作用。

HTML:

<section class="wrapper">
<ul class="tabs">
   <li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
</ul>
<ul class="tab__content">
   <li class="active">
      <div id="tab1" class="content__wrapper">
      </div>
   </li>
   <li>
      <div class="content__wrapper">
           <a href="tab1" data-anchor="#tab1">Link</a>
                </div>
        </li>
    </ul>
</section>

Answer 1

试试下面的点击事件：

$('[data-anchor="#tab1"]').on("click", function(e){
e.preventDefault();
    $(".tabs > li").removeClass("active"); //Remove class from active tab
    $('.tabs > li:first').addClass("active"); //Add class active to clicked tab
    clickedTab = $(".tabs .active"); //Update clickedTab variable
    // fade out active tab
    activeTab.fadeOut(250, function(){
        $(".tab__content > li").removeClass("active"); //Remove active class all tabs
        var clickedTabIndex = clickedTab.index(); //Get index of clicked tab
        $(".tab__content > li").eq(clickedTabIndex).addClass("active"); //Add class active to corresponding tab
        activeTab = $(".tab__content > .active"); //update new active tab
        activeTabHeight = activeTab.outerHeight(); //Update variable
        //Animate height of wrapper to new tab height
        tabWrapper.stop().delay(50).animate({
            height: activeTabHeight
        }, 500, function(){
            activeTab.delay(50).fadeIn(250); // Fade in active tab
        });
    });
});

查看演示：

https://jsfiddle.net/yzpjcm9b/

如何平滑地从另一个标签页滚动到另一个标签页？

How to smooth scroll from another tabbed page to another?

javascript

jquery

html

css

tabbed