jQuery scrollTop scrolls the collapsed navbar on mobile

Question

I'm using jQuery to achieve a scroll-to effect (clicking on a navbar item to scroll to a section of the page).

$(document).ready(function(){
 $(".js-scroll-trigger").on('click', function(event) {
   if (this.hash !== "") {
     event.preventDefault();
     var hash = this.hash;   
     $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 500, function(){
       window.location.hash = hash;
     });
   } // End if
 });
});

Works fine on desktop, but I encountered a bug that's driving me up the wall. When in mobile, the collapsed navbar also uses the scroll to effect, but certain navbar elements (latter ones) when clicked will take the user to the section, but will also cause the actual collapsed navbar to scroll as well, essentially hiding the navbar collapse button that's at the top...

I am also using Bootstrap 5, and Headroom.js and Neumorphism UI library.

EDIT: more examples. This is some HTML from the navbar:

  <header class="header-global">
    <nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-light navbar-transparent navbar-theme-primary fixed-top">
      <div class="container position-relative">
        <a class="navbar-brand  py-4 px-4  mr-lg-4" href="./index.php">        
          </a>
        <div class="navbar-collapse collapse" id="navbar_global">
          <div class="navbar-collapse-header">
            <div class="row">
              <div class="col-6 collapse-brand">
                <a href="./index.php" class="navbar-brand shadow-soft py-2 px-3 rounded border border-light">
                  
                </a>
              </div>
              <div class="col-6 collapse-close">
                <a href="#navbar_global" class="fas fa-times" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
              </div>
            </div>
          </div>
          <div class="nav-wrapper position-relative">
            <ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 active js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#about">About us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" data-toggle="scroll" href="#work">Our work</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" href="#pricing">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 js-scroll-trigger" data-toggle="tab" href="#contact">Contact us</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="d-flex align-items-center">
          <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </nav>
  </header>

This is some of the neumorphism.js code:

"use strict";
$(document).ready(function () {

    // options

    var breakpoints = {
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1140
    };

    var $navbarCollapse = $('.navbar-main .collapse');

    // Collapse navigation
    $navbarCollapse.on('hide.bs.collapse', function () {
        var $this = $(this);
        $this.addClass('collapsing-out');
        $('html, body').css('overflow', 'initial');
    });

    $navbarCollapse.on('hidden.bs.collapse', function () {
        var $this = $(this);
        $this.removeClass('collapsing-out');
    });

    $navbarCollapse.on('shown.bs.collapse', function () {
        $('html, body').css('overflow', 'hidden');
    });

    $('.navbar-main .dropdown').on('hide.bs.dropdown', function () {
        var $this = $(this).find('.dropdown-menu');

        $this.addClass('close');

        setTimeout(function () {
            $this.removeClass('close');
        }, 200);

    });

    $(document).on('click', '.mega-dropdown', function (e) {
        e.stopPropagation();
    });

    $(document).on('click', '.navbar-nav > .dropdown', function (e) {
        e.stopPropagation();
    });

    $('.dropdown-submenu > .dropdown-toggle').click(function (e) {
        e.preventDefault();
        $(this).parent('.dropdown-submenu').toggleClass('show');
    });

    // Headroom - show/hide navbar on scroll
    if ($('.headroom')[0]) {
        var headroom = new Headroom(document.querySelector("#navbar-main"), {
            offset: 0,
            tolerance: {
                up: 0,
                down: 0
            },
        });
        headroom.init();
    }

UPDATE - SOLVED! To anyone else who might be facing this problem, the thing that worked for me was to adjust the overflow in the neumorphism.js - from 'hidden' and 'initial', I set it to 'scroll'. Additionally, if you want the navbar to close after you click a link in mobile, add this (found this on stackoverflow --> How to hide collapsible Bootstrap navbar on click):

// collapse navbar on mobile after link is clicked
      $('.nav-link').on('click',function() {
    $('.navbar-collapse').collapse('hide');
  });

$navbarCollapse.on('hide.bs.collapse', function () {
        var $this = $(this);
        $this.addClass('collapsing-out');
        $('html, body').css('overflow', 'scroll');
    });

    $navbarCollapse.on('hidden.bs.collapse', function () {
        var $this = $(this);
        $this.removeClass('collapsing-out');
    });

    $navbarCollapse.on('shown.bs.collapse', function () {
        $('html, body').css('overflow', 'scroll');
    });