URL含hash时阻止浏览器滚动到元素但保留hash的实现方案

你遇到的问题是浏览器的默认行为导致的——当修改window.location.hash时，浏览器会自动查找页面中id与哈希值匹配的元素并滚动到它的位置。setTimeout没生效大概率是因为浏览器的滚动操作优先级更高，或者执行时机没卡对。下面给你两种靠谱的解决方案：

方案一：使用history.replaceState替代直接设置hash #

这是最优雅的方法，它可以修改URL的哈希部分，但不会触发浏览器的自动滚动行为，完全契合你的需求。

修改后的JS代码如下：

// 页面加载时处理哈希
if(window.location.hash) {
    var hash = window.location.hash.substring(1);
    $('#' + hash).addClass('activeblok');
    // 若页面加载时因哈希自动滚动了，手动滚回顶部
    window.scrollTo(0, 0);
}

const $blokje = $('.klantenblokje');
$blokje.on("click", function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    
    $blokje.not(this).removeClass('activeblok');
    $(this).addClass('activeblok');
    
    // 用replaceState修改哈希，不触发滚动
    history.replaceState(null, null, '#' + id);
    
    // Ajax加载问答内容
    $.ajax({
        type:'post',
        url:"includes/faqresult.php",
        data:{id: id},
        success:function(data){
            $("#faqresult").show().empty().append( data );
        }
    });
});

原理说明 #

history.replaceState是HTML5 History API的一部分，它允许你修改浏览器历史记录的当前条目（包括URL的哈希部分），但不会触发页面刷新或自动滚动。既保留了可分享的哈希链接功能，又避免了不必要的滚动行为。

方案二：临时修改元素ID（兼容旧浏览器） #

如果需要兼容不支持History API的旧浏览器，可以用这个临时修改ID的hack方法：在设置hash前，先把目标元素的ID改成临时值，设置完hash后再改回原ID，这样浏览器找不到匹配的元素就不会滚动了。

示例代码：

$blokje.on("click", function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    var tempId = 'temp-' + id;
    
    $blokje.not(this).removeClass('activeblok');
    $(this).addClass('activeblok');
    
    // 临时修改ID，避免浏览器匹配滚动
    $(this).attr('id', tempId);
    window.location.hash = id;
    // 恢复原ID
    $(this).attr('id', id);
    
    // Ajax加载问答内容
    $.ajax({
        type:'post',
        url:"includes/faqresult.php",
        data:{id: id},
        success:function(data){
            $("#faqresult").show().empty().append( data );
        }
    });
});

另外，页面加载时如果哈希导致了自动滚动，可以在DOM加载完成后手动修正：

document.addEventListener('DOMContentLoaded', function() {
    if(window.location.hash) {
        setTimeout(() => {
            window.scrollTo(0, 0);
        }, 0);
    }
});

推荐优先使用方案一，它更符合现代浏览器标准，代码也更简洁易维护。

内容的提问来源于stack exchange，提问作者twan