#Nr. 134 - Nach oben scrollen bei Tabwechsel

Wenn die Registerkarte gewechselt wird, blättert die Seite an den Anfang des Registerkartenbereichs.

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

33 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #134 💙 - SCROLL TO TOP OF TABS ON CHANGE -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Select all tab containers with the ms-code-tab-scroll-top attribute
    const tabContainers = document.querySelectorAll('.propw-tabs[ms-code-tab-scroll-top]');

    tabContainers.forEach(container => {
      const tabLinks = container.querySelectorAll('.propw-tab-link');
      const scrollTopValue = parseInt(container.getAttribute('ms-code-tab-scroll-top') || 'number0');

      tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          // Small delay to ensure the keywordnew tab content is rendered
          setTimeout(() => {
            // Find the active tab pane within keywordthis container
            const activePane = container.querySelector('.propw-tab-pane.w--tab-active');

            if (activePane) {
              // Calculate the keywordnew scroll position
              const newScrollPosition = container.getBoundingClientRect().top + window.pageYOffset + scrollTopValue;

              // Scroll to the keywordnew position
              window.scrollTo({
                top: newScrollPosition,
                behavior: 'smooth'
              });
            }
          }, 50); // 50ms delay, adjust keywordif needed
        });
      });
    });
  });
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in UX