Streaming live at 10am (PST)

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

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:
[Investment Calculator]

Here is my public share link:
[Webflow - Everstar]