CODEWITHSUNDEEP
javascripthtmljqueryurl
twan
twan

Reputation: 2659

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

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);
}

Upvotes: 4

Views: 3086

Answers (2)

C3roe
C3roe

Reputation: 96454

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.

Upvotes: 2

Jan Mlčoch
Jan Mlčoch

Reputation: 71

Scroll depends on id of elements. You can try to identify elements by data attribute (id is better for identifying, because it should be unique, but in your case it will be helpful to use the data).

If u change

<div class="col-md-2 col-6">
  <a href="#bezorgen" id="bezorgen" class="klantenblokje">
    <i class="icon-transport"></i>
    <span>Bezorgen</span>
  </a>
</div>

to

<div class="col-md-2 col-6">
  <a href="#bezorgen" data-name="bezorgen" class="klantenblokje">
    <i class="icon-transport"></i>
    <span>Bezorgen</span>
  </a>
</div>

and change your script to find specific data in attributes

$('*[data-name='+hash+']').addClass('activeblok');

and add to url

var id = $(this).data('name');

Upvotes: 1

Related Questions