I’ve created a sub menu using the Webflow anchor link action. My issue is that it disables the mirror click events I have setup to pick tabs in a tabbed element.
Any ideas/solutions?
Goal:
Clicking sub menu buttons will go to tabbed section and trigger one of 3 tabbed content panels.
Work:
Created 3 buttons.
Added anchor link to the tabbed section.
Added triggers to each of 3 buttons.
Added mirror click attributes to buttons to trigger the named tabs targets.
Results:
Clicking sub menu buttons will take the user to the tabbed section as expected, but inhibits any mirror click events.
Testing:
Removing the anchor links allows the mirror click button to activate the tabbed parts of the tab element but no scrolling to that section without the anchor link.
I even tried encasing the first button in a div and moved the mirror clicking there to separate it from the link button. No joy. The anchor link reigns supreme.
Hey @Joseph! I see you have a snippet to scroll into view. We might be able to modify this to achieve everything we need. Can you please remove the Webflow link setting that scrolls to the section and add the needed ID’s to the buttons? I can help you out with the code
Hey @Joseph! Seems like the ID’s didn’t publish correctly, however, it does not matter as I have used the Attributes as the selector for the buttons.
It seems that adding a small delay to the scroll function solves the issue. Can you please try using this code?
<script>
// Function to scroll to the target section with a slight delay
function scrollToSection() {
setTimeout(() => {
document.getElementById('Pro-tabbed-info').scrollIntoView({ behavior: 'smooth' });
}, 10);
}
// Get the buttons and add event listeners
document.querySelectorAll('[fs-mirrorclick-element^="trigger-"]').forEach((button) => {
button.addEventListener('click', scrollToSection);
});
</script>
Good Morning Luis!
Okay, added that code.
First tested right out of the box and the buttons continued to change section tabs as expected but no anchor scrolling.
2nd test I added the anchor scroll back in and that started working again but the mirror click activating the tabbed sections stopped. So, this code not helping.
Hey @Joseph! The conflict may come with the code in the </body> section. The code I shared is a replacement for the one you have there. Can you replace the code and test once again?
