Запретить браузеру прокрутку к элементу, когда в URL-адресе присутствует ha sh, но сохранить его в URL-адресе

Question

У меня есть кнопки, которые загружают вопросы и ответы (это FAQ). Когда нажимается кнопка, я использую window.location.hash, чтобы установить ha sh в URL-адресе, чтобы получить URL-адрес, который люди могут скопировать, и поэтому позже я могу автоматически открыть кнопку с ее вопросами, например: website.nl/faq # category1

Проблема в том, что при нажатии кнопки и установке ha sh браузер мгновенно прокручивается до кнопки, чего я не хочу. Как его выключить?

Это мой код на данный момент:

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

И мой 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>

Я пробовал это с другого вопрос, но без результата:

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

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

Answer 1

Это можно сделать с помощью HTML5 History API и его методов pushState или replaceState.

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

или

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

Оба из них изменят URL-адрес, отображаемый в адресной строке, но не перейдут к элементу на странице, позиция прокрутки останется прежней.

Разница между ними в том, что первый создаст новую запись в истории браузера, тогда как вторая перезапишет текущую - так что это повлияет на то, что происходит, когда пользователь после этого нажимает кнопку «назад» в своем браузере. Если вы изменили ha sh пять раз, но не хотите, чтобы пользователю приходилось нажимать кнопку «Назад» шесть раз, чтобы вернуться на страницу предыдущую , тогда используйте replaceState.

Answer 2

Прокрутка зависит от id элементов. Вы можете попробовать идентифицировать элементы по атрибуту данных (идентификатор лучше для идентификации, потому что он должен быть уникальным, но в вашем случае будет полезно использовать данные).

Если u изменить

<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="#bezorgen" data-name="bezorgen" class="klantenblokje">
    <i class="icon-transport"></i>
    <span>Bezorgen</span>
  </a>
</div>

и измените свой скрипт, чтобы найти указанные c данные в атрибутах

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

и добавить к URL

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