Anchor tab link not working

[AlexisGardin (Alexis)]

Hello there,

Here is my site link : https://www.keysandcocafe.com

The problem here is that on the homepage I tried to link my three items ( Food, drinks & cakes ) directly to the corresponding tab item on the “Menu” page. I tried several ways but no idea on how to fix it.

Thanks for your help,
Alexis

[spirelli]

This thread might be helpful. However, although this custom code does show the appropriate tab, it does not seem to scroll to that section. Some adjustment would be needed to that script. If you come up with anything that does this as well, please post the solution. Cheers!

Solution - creating an URL link for a specific tab

Hi all, I needed a solution for creating an URL link for a specific tab, i found other solutions like Accessing tabs from address bar or Linking to Specific Tab from another Link or Button but i needed a specific separate url for each tab. Then I found this solution How to create a link to a specific tab? , (thanks a lot @design) and improved it a bit because it didn’t work well for me :). So here you have an improved solution: <script> $( function() { function changeTab() { var …

[DuncanHamra (from Memberstack)]

This script I just created will smoothly scroll to the correct tab

I think the script I just created would help with this.

#31 - Open a Webflow Tab with a Link | Webflow Powerups

<!-- 💙 MEMBERSCRIPT #31 v0.2 💙 OPEN WEBFLOW TAB w/ LINK -->
<!-- You can link to tabs like this 👉 www.yoursite.com#tab-name-lowercase -->
<!-- And sub tabs like this 👉 www.yoursite.com#tab-name/sub-tab-name -->
<script>
  var Webflow = Webflow || [];
  Webflow.push(() => {
    function changeTab(shouldScroll = false) {
      const hashSegments = window.location.hash.substring(1).split('/');
      const offset = 90; // change this to match your fixed header height if you have one
      let lastTabTarget;

      for (const segment of hashSegments) {
        const tabTarget = document.querySelector(`[data-w-tab="${segment}"]`);

        if (tabTarget) {
          tabTarget.click();
          lastTabTarget = tabTarget;
        }
      }

      if (shouldScroll && lastTabTarget) {
        window.scrollTo({
          top: $(lastTabTarget).offset().top - offset, behavior: 'smooth'
        });
      }
    }
    
    const tabs = document.querySelectorAll('[data-w-tab]');
    
    tabs.forEach(tab => {
      const dataWTabValue = tab.dataset.wTab;
      const parsedDataTab = dataWTabValue.replace(/\s+/g,"-").toLowerCase();
      tab.dataset.wTab = parsedDataTab;
      tab.addEventListener('click', () => {
        history.pushState({}, '', `#${parsedDataTab}`);
      });
    });
 
  	if (window.location.hash) {
      requestAnimationFrame(() => { changeTab(true); });
    }

    window.addEventListener('hashchange', () => { changeTab() });
  });
</script>