Auto Scroll to Tab Pane after Clicking Tab Link.....Works well, but not for all

Design help Custom code
1

Need jquery help! I have a set of tabs, which, upon clicking the tab link, opens up the tab pane with additional tab options—tabs within tabs.

It all works well, but I am trying to incorporate a scroll feature so that when a tab link is clicked, the window automatically scrolls down to have the tab pane in view, prompting the user to make the next tab selection.

It all works for the first set of tabs beautifully, starting with the “$50K” primary tab as well as for all of its secondary tabs. But when I click any other sub tabs from any other primary tabs ($100K, 250K, etc), clicking the secondary tabs scrolls the page scrolls up to the top.

After troubleshooting, it just doesn’t seem to like having the secondary tab anchor class used on more than one tab pane—why not?

Here is the code I am using to scroll the window down to bring the tab panes into view:

<script>

  $(".tab-button-tier-1").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $(".tier1").offset().top -100
    }, 200);
  });
  
  $(".tab-button-tier-2").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $(".tier2").offset().top -100
    }, 200);
  });

</script>

Published link so you can check the interaction:
[https://everstar-45f898.webflow.io/calculator]

Here is my public share link:
[https://preview.webflow.com/preview/everstar-45f898?utm_medium=preview_link&utm_source=designer&utm_content=everstar-45f898&preview=986fbd9f6c397a3bd600aaadb4efe59d&pageId=60949a480833dfdedd648bf2&mode=preview]

1 Like
2

I think the script I just created will help with this sort of problem. When a tab is clicked it adds an anchor link to the URL and smoothly scrolls

3

I’ve tried implementing your solution and it does not smooth scroll to the tabs if you are trying to link to the tabs from within the page and the place where you are linking from is separate from the place you want to link to (ie. the link to the tab is located the top of the page and the tabs are located at the bottom of the page). Is there a fix for this?