Using JS to select the current day of week in a schedule, but in mobile it causes the page to jump to that section rather than starting at the top of the page

<script type="text/javascript">
var Webflow = Webflow || [];
Webflow.push(function () {
  // Your tab button must have this class
  var tabClassName = "week-day-tab";
  
  // Get day of the week. 0 = Sun, 1 = Mon, 2 = Tues, etc
  var weekDay = (new Date()).getDay();
  
  // Find the tab that has the data attribute matching the weekDay number
  var tab = document.querySelector("." + tabClassName + "[data-week-day='" + weekDay + "']");
  if(tab) {
    // Click the tab to set it as the current tab
    tab.dispatchEvent(new Event("click"));
  }
});
</script>

So I put this block of JS code into my Webflow website for a schedule that shows different class times for our gym. The schedule is structured as a tab bar, where each day is a tab and clicking on a tab will show you the classes for that day.

My issue is that the pages I’ve included this on, in mobile it automatically jumps down to the schedule section where this JS is linked instead of starting at the top of the page like you normally do when entering a website. I believe it’s caused by the line:

// Click the tab to set it as the current tab
    tab.dispatchEvent(new Event("click"));

I’m guessing that when this click event happens it causes the page on mobile to scroll to the spot where the click/tap occurred. So I’m wondering if there’s any work arounds I can do to solve this, either with CSS properties or other lines of JS. I’m not familiar with JS… I just found a tutorial that showed how to do this and implement it. So I would probably need specific lines of code to put in if anyone knows of any XD.


Here is my site Read-Only: [LINK][1]

[1]: http://https://preview.webflow.com/preview/armr-crossfit?utm_medium=preview_link&utm_source=designer&utm_content=armr-crossfit&preview=c0496233b1709c39dd2d79f788033fbf&workflow=previewPreformatted text