How to smooth scroll from another tabbed page to another?

I have a tabbed menu, and one of the page in tabbed menu has a link that need to go to the another tabbed page.

How to do this? I tried the smooth scroll but it's not working.

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>

try the following click event:

$('[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
        });
    });
});

see demo:

https://jsfiddle.net/yzpjcm9b/