Is it possible to disable only the anchor scroll

Question

I actually have a list of item, that open each a diffrent menu, thanks to an href (the #mat for example display a menu)

  <div class ="row  d-none d-lg-block classer no-gutters ">
                <h4>Order by
<a class = "navigation" href="#mat" id="navMat"  >localisation</a> /  
<a class = "navigation" href="#new" id="navNew"  >new</a>

and this jquery, to underline the current active item (ex : localisation)

    jQuery( document ).ready(function() {
        jQuery('.navigation').on('click', function(e){
            jQuery('.navigation').removeClass('navigationU');
            this.className = 'navigationU navigation';
        })
    });

The problem is that i would like this href to underline the current active item, to open the menu, but it scrolls to it and i don't want it.

I already tried e.preventDefault(); but i disable everything : the scroll, but also the underline and the display of the menu.

Do you have any idea ? Thanks

Answer 1

Try this:

$(document).on('click', '[href^="#"]', function(e) {
   location.hash = e.target.hash;
   e.preventDefault();
});

it will disable all links that start with # and recreated updating the hash in address bar.