User014019 User014019 - 10 months ago 42
CSS Question

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.



<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 class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
<div class="content__wrapper">
<a href="tab1" data-anchor="#tab1">Link</a>

Answer Source

try the following click event:

$('[data-anchor="#tab1"]').on("click", function(e){
    $(".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
            height: activeTabHeight
        }, 500, function(){
            activeTab.delay(50).fadeIn(250); // Fade in active tab

see demo: