Prevent browser from scrolling to element when hash is present in URL but keep it in the URL

Question

I have some buttons which load questions and answers (it's an FAQ). When a button is clicked, I use window.location.hash to set the hash in URL to get an URL people can copy, and so later on I can automatically open a button with it's questions on for example: website.nl/faq#category1

The problem is when a button is clicked and the hash is set, the browser instantly scrolls to the button, which is not something I want. How can I turn it off?

This is my code currently:

if(window.location.hash) {
    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
    $('#' + hash).addClass('activeblok');
    } else {

}

const $blokje = $('.klantenblokje');
$blokje.on("click", function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $blokje.not(this).removeClass('activeblok');
    $(this).addClass('activeblok');
        window.location.hash = id;
        // Ajax post which retrieves the questions
        $.ajax({
         type:'post',
         url:"includes/faqresult.php",
         data:{id: id},
         success:function(data){
             $( "#faqresult" ).show().empty().append( data );
         }
     });
});

And my HTML:

<div class="col-md-2 col-6">
  <a href="#bezorgen" id="bezorgen" class="klantenblokje">
    <i class="icon-transport"></i>
    <span>Bezorgen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#bestellen" id="bestellen" class="klantenblokje">
    <i class="icon-cart"></i>
    <span>Bestellen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#betalen" id="betalen" class="klantenblokje">
    <i class="icon-euro"></i>
    <span>Betalen</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#uploaden" id="uploaden" class="klantenblokje">
    <i class="icon-upload"></i>
    <span>Bestanden uploaden</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#garantie-reparatie" id="garantie-reparatie" class="klantenblokje">
    <i class="icon-box"></i>
    <span>Garantie en reparatie</span>
  </a>
</div>
<div class="col-md-2 col-6">
  <a href="#account" id="account" class="klantenblokje">
    <i class="icon-user"></i>
    <span>Account</span>
  </a>
</div>

I've tried this from another question but without result:

if (location.hash) {
  setTimeout(function() {

    window.scrollTo(0, 0);
  }, 1);
}

Answer 1

You can do this by using the HTML5 History API, and its pushState or replaceState methods.

history.pushState(true, '', '#your-hash')

or

history.replaceState(true, '', '#your-hash')

Both of those will change the URL shown in the address bar, but not jump to the element in the page, the scroll position will stay as it was.

The difference between the two is that the first one will create a new entry in the browser history, whereas the second one will overwrite the current one - so this will affect what happens, when the user clicks the “back” button in their browser afterwards. If you changed the hash five times, but don’t want the user to have to click the back button six times to get back to the previous page, then use replaceState.