Tabs Menu Interaction

Hello,
I am using a tabs menu to display text from a CMS Collection. Is it possible to change the way the tabs content is shown to the visitor using interactions? For example, when someone clicks or taps on a tab title, could the screen move down to show the tabs content ; rather than the visitor having to scroll down to the tabs content manually? If so, how might this be done?

It is mostly an effect I would like to see for tablet vertical and mobile - as everything grows taller and narrower.

Screen Shot :

Please advise.
Thank you,
Sara

Published Page Link: https://saras-fresh-project-29b7f0.webflow.io/about/james-morton-about-the-art-prints

Here is my public share link: https://preview.webflow.com/preview/saras-fresh-project-29b7f0?utm_medium=preview_link&utm_source=designer&utm_content=saras-fresh-project-29b7f0&preview=fe3ebf1fe45ff37c9b9a87a8573ca881&pageId=5d94ee97c6635622129a2aca&itemId=5d94f33c3ca6da70654ca5a5&mode=preview
([how to access public share link][2])

Hi Sara,
It is possible to have your page automatically scroll to the tab content after a tab button is clicked.

To do this, add the code below to your page in the Before < /body> Tag section, located in the page settings.

<script type="text/javascript">
      $(".w-tab-link").click(function() {
        var target = $(".w-tab-menu")[0].getBoundingClientRect();
        window.scrollTo({
          top: target.bottom + window.scrollY,
          left: 0,
          behavior: "smooth",
        });
      });
</script>

Hope this helps! Let me know if you have any questions.
Chris

2 Likes

Hi Chris @cspags ,

Thank you so much for providing that javascript code!
I followed your instructions.
Just tested it out on my iPhone. It works great!

Much appreciated,
Sara

1 Like