Streaming live at 10am (PST)

Tabs Menu Interaction

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,

Published Page Link:

Here is my public share link:
([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();
          top: target.bottom + window.scrollY,
          left: 0,
          behavior: "smooth",

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


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,

1 Like