One script cancelling out another script?

I’ve got a page with two scripts. One script is for forcing the form to scroll up to view the success message upon submission. The other is to force a tab to switch when a button is clicked.

The second script (tab switcher) worked perfectly until I added the form script, which leads me to believe that the form script is overriding or canceling out the tab switcher script, but I don’t know enough about jquery to be able to tell.

Here are the scripts in question:

Form scroll up on submission (this is in the universal custom code as it is used on more than one page):

<!--START: scroll to success message after submitting form-->
<script>
$(document).ready(function() {
  $("form").submit(function() {
    $("body,html").animate(
      {
        scrollTop: $("#form-scroll").offset().top
      },
      800 //speed
    );
  });
});
</script>
<!--END: scroll to success message after submitting form-->

Tab switcher (this is only in this page’s custom code):

<!-- START: button changes active tab-->
<script>
  $('.custom-button').on('click', function (evt) {
    $('.target-tab-link').triggerHandler('click');
    evt.preventDefault();
    var element_to_scroll_to = document.getElementById('info-request');
    element_to_scroll_to.scrollIntoView()
  });
</script>
<!-- END: button changes active tab-->

Read only
Staging: https://deshret-capital.webflow.io/audit-request

Are you sure it is because you added the scroll up script? It looks like your issue is document.getElementById(‘info-request’) in your tab switcher script which targets this <div id="info-request" class="b-gradient-flex-to-text on-analytics-page">.
When the box is outside of the viewport it works as expected i.e. scrollIntoView moves the page up.

Thanks for pointing this out! The issue actually ended up being that I had but the jquery cdn in the global footer and not the head. Rookie mistake. :slight_smile: