Tabs Addon – Assign Anchor Link

Thanks Paul,

I ended up using the following (should work on any page using the Tabs addon) ... paste it into the </body> section of your template (assuming you're using something like Helix). Be sure to add the 'script' starting and closing tags to the start and end of the following:

(function () {
  // Pixels to leave above the tabs when scrolling (for the sticky header). Set to 0 to disable.
  var HEADER_OFFSET = 100;

  function slug(text) {
    return text.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
  }

  function findTabLink(hash) {
    if (!hash || hash.length < 2) return null;
    var key = decodeURIComponent(hash.slice(1)).toLowerCase();
    var links = Array.prototype.slice.call(document.querySelectorAll('a[href^="#sppb-tab"]'));
    if (!links.length) return null;

    // 1. Exact tab ID, e.g. #sppb-tab-CbRNDQ1uxm0A6ZoeIYTM31
    for (var i = 0; i < links.length; i++) {
      if (links[i].getAttribute('href').toLowerCase() === '#' + key) return links[i];
    }

    // 2. Position, e.g. #sppb-tab1-2 = 1st tab group on the page, 2nd tab
    var m = key.match(/^sppb-tab(\d+)-(\d+)$/);
    if (m) {
      var groups = [];
      links.forEach(function (a) {
        var g = a.closest('ul, [role="tablist"]') || a.parentNode;
        if (groups.indexOf(g) === -1) groups.push(g);
      });
      var group = groups[parseInt(m[1], 10) - 1];
      if (group) {
        var inGroup = links.filter(function (a) {
          return (a.closest('ul, [role="tablist"]') || a.parentNode) === group;
        });
        return inGroup[parseInt(m[2], 10) - 1] || null;
      }
    }

    // 3. Tab label, e.g. #buy-now or #sell
    for (var j = 0; j < links.length; j++) {
      if (slug(links[j].textContent) === key) return links[j];
    }
    return null;
  }

  function activateFromHash(scroll) {
    var link = findTabLink(window.location.hash);
    if (!link) return;
    link.click(); // lets SP Page Builder switch the tab and its content itself
    if (scroll) {
      var nav = link.closest('ul, [role="tablist"]') || link;
      var top = nav.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;
      window.scrollTo({ top: top, behavior: 'smooth' });
    }
  }

  // Run after the page and SP Page Builder's scripts have loaded
  window.addEventListener('load', function () { activateFromHash(true); });
  // Also respond if the hash changes while the user is already on the page
  window.addEventListener('hashchange', function () { activateFromHash(true); });
})();