別のタブ付きページから別のタブ付きページにスクロールするにはどうすればいいですか？

Question

私にはタブ付きメニューがあり、タブ付きメニューのページの1つに別のタブ付きページに移動する必要のあるリンクがあります。

これを行う方法？スムーススクロールを試みましたが、うまくいきません。

JSfiddle

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/