Jump link to new page and new tab

Support
#1

Hello,
I am trying to link several icons on the home page to a specific tab on a different page. I tried to use the id and href but that is not working. I had to use the raw content to implement 6 tabs as opposed to the max 5 the theme allows for. Here is the link to the website: http://statenislandda.org/
The first two tabs are what I tested the id and hrefs on but they are both going to the first tab only. Please advise.
Thank you

#2

Hi There,

Please try this code:

jQuery( function($){ 
$( document ).ready( function(){
scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
});


function scroll_to_tab ( tab_id ) { 
    console.log(tab_id);
var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tab_id + '"]');
if(tab_nav.length >=1) {
$( tab_nav ).trigger('click');
$('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');}
}
});

Your link from the button to access those tab should be something like this:

http://statenislandda.org/our-efforts/#tab-1
http://statenislandda.org/our-efforts/#tab-2
http://statenislandda.org/our-efforts/#tab-3
http://statenislandda.org/our-efforts/#tab-4
http://statenislandda.org/our-efforts/#tab-5
http://statenislandda.org/our-efforts/#tab-6

Hope this helps.

#3

Hello,
Thanks for your response. I implemented the code you provided. Unfortunately, all of the icons on the home page are still going to the first tab only. Please advise. Thank you : )

#4

Hello There,

Could you please update the JS code and use this instead:

jQuery( function($){ 
  $( window ).on('load resize', function(){
    scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
  });


  function scroll_to_tab ( tab_id ) { 
    console.log(tab_id);
    var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tab_id + '"]');
    if(tab_nav.length >=1) {
      $( tab_nav ).trigger('click');
      $('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
    }
  }
});

We would loved to know if this has work for you. Thank you.

#5

Hello,
it is doing something weird on the iphone.** When I click the icon it will take me to that tab. When I am on the efforts page if I want to click on a different tab and scroll, it will keep jumping back to the tab I originally landed on. Please advise. Thank you

#6

Hey There,

Please have the JS code updated again and use this instead:

jQuery( function($){ 
  $( window ).on('load', function(){
    scroll_to_tab ( location.href.split("#tab-").slice(-1)[0] );
  });


  function scroll_to_tab ( tab_id ) { 
    console.log(tab_id);
    var tab_nav = $('.x-nav-tabs .x-nav-tabs-item a[data-cs-tab-toggle="' + tab_id + '"]');
    if(tab_nav.length >=1) {
      $( tab_nav ).trigger('click');
      $('html,body').stop().animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 ) },700 ,'swing');
    }
  }
});

The script should now only work after the page is loaded and not on every page resize.

Please let us know how it goes.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.