Solution - creating an URL link for a specific tab

Hey @nvanoort :wave:

The scroll only happens when the page loads, so you’ll want to change your nav links to be absolute or relative including the slug. Whatever it takes to trigger the page refresh.

Screen Shot 2023-10-04 at 4.11.13 PM

1 Like

Thanks, @DuncanHamra.

I had made those links component properties in an attempt to be able to change the type of link they were on only the services page only because my nav is a component used across the whole site, but even after removing the component properties link, I was unable to get either an absolute or relative link to force a reload of the page.

However, I did find the following Memberstack script, https://www.memberstack.com/scripts/refresh-page-after-set-duration-on-click, that when applied on that page and the custom attribute to those links (with a delay of 0), is having the desired result. It forces a refresh and then scrolls down the page to the correct tab.

Unless I’m missing some key reason why this approach shouldn’t be used, I will leave it as it is now functioning. Thanks for offering help!

1 Like

Given a tab menu element with position: sticky, the scrolling will break.
To fix this, scroll to the tab menu’s parent element instead:
Replace

top: $(tabTarget).offset().top - offset, behavior: 'smooth'

with

top: $(tabTarget.closest('.w-tabs')).offset().top - offset, behavior: 'smooth'

2 Likes