当URL中存在哈希时，防止浏览器滚动到元素，但将其保留在URL中

Question

我有一些按钮加载问题和答案（这是一个常见问题）。 单击按钮时，我使用window.location.hash设置URL中的哈希值，以获得人们可以复制的URL，因此稍后我可以自动打开按钮，其中包含问题，例如:website.nl/FAQ#category1

问题是当一个按钮被点击并设置了散列后，浏览器瞬间滚动到该按钮，这不是我想要的。 我怎么才能关掉它？

这是我当前的代码:

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

滚动取决于元素的id。 您可以尝试通过数据属性来标识元素（id更好用于标识，因为它应该是唯一的，但在您的情况下，使用数据会有帮助）。

如果你改变

<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>

并更改脚本以查找属性中的特定数据

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

并添加到url

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

Answer 2

您可以通过使用HTML5历史API及其pushstate或replaceste方法来实现这一点。

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

或

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

这两种方式都将更改地址栏中显示的URL，但不会跳转到页面中的元素，滚动位置将保持不变。

两者的区别在于，第一个将在浏览器历史记录中创建一个新条目，而第二个将覆盖当前条目--因此，这将影响用户之后单击浏览器中的“后退”按钮时所发生的情况。 如果您更改了五次哈希，但不希望用户必须单击六次back按钮才能返回到上一页，那么使用ReplaceState。