Merge pull request #1271 from hlxsites/tab-hash-links

tab hash link fix

blocks/tabs-horizontal/tabs-horizontal.js

@@ -1,6 +1,7 @@
 import {
   div, li, ul,
 } from '../../scripts/dom-helpers.js';
+import { toClassName } from '../../scripts/lib-franklin.js';
 import { processEmbedFragment } from '../../scripts/scripts.js';
 
 const classActive = 'active';
@@ -15,6 +16,21 @@ function handleTabClick(e, idx) {
   panes[idx].classList.add(classActive);
 }
 
+function redirectedNav() {
+  const hashUrl = window.location.hash.split('#')[1];
+  setTimeout(() => {
+    const tab = document.getElementById(hashUrl);
+    if (tab) {
+      const tabSection = tab.closest('.section');
+      tab.click();
+      window.scroll({
+        top: tabSection.getBoundingClientRect().top + window.screenY - 150,
+        behavior: 'smooth',
+      });
+    }
+  }, 500);
+}
+
 function buildNav(block) {
   const titles = block.querySelectorAll('.tabs-horizontal > div > div:first-child');
   const elemWidth = Math.floor(100 / titles.length);
@@ -24,6 +40,7 @@ function buildNav(block) {
     const listItem = li(
       {
         class: 'tabs-nav-item',
+        id: toClassName(tabTitle),
         style: `width: ${elemWidth}%;`,
         onclick: (e) => { handleTabClick(e, idx); },
         'aria-label': tabTitle,
@@ -56,6 +73,6 @@ export default async function decorate(block) {
 
   block.append(nav);
   block.append(tabs);
-
+  redirectedNav();
   return block;
 }