diff --git a/blocks/tabs-horizontal/tabs-horizontal.js b/blocks/tabs-horizontal/tabs-horizontal.js index c7a0173d3..c06dd372d 100644 --- a/blocks/tabs-horizontal/tabs-horizontal.js +++ b/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; }