带完整URL重定向时页面滚动顶部偏移功能失效问题求助

当通过带锚点的完整URL（如/main-page/a#id_1）跳转页面时，浏览器默认的锚点定位会忽略固定头部高度，导致目标区域被遮挡。要解决这个问题，需要同时处理页面内点击跳转和页面加载时的锚点定位两种场景：

解决方案步骤 #

1. 拦截带锚点的链接点击事件，阻止浏览器默认跳转行为，手动提取锚点ID并执行带偏移的滚动（同域场景）；跨域/跨页面跳转则依赖目标页面加载时的锚点修正逻辑。
2. 页面加载完成后，检查URL中的hash值，若存在则自动执行带偏移的滚动修正。

修改后的代码 #

HTML代码（无需改动） #

<a href="/main-page/x">XX</a>
<div class="subcategories">
<div class="subcategories-link"><a href="/main-page/a#id_1">AA</a></div>
<div class="subcategories-link"><a href="/main-page/a#id_2">BB</a></div>
<div class="subcategories-link"><a href="/main-page/a#id_3">CC</a></div>
<div class="subcategories-link"><a href="/main-page/a#id_4">DD</a></div>
<div class="subcategories-link"><a href="/main-page/a#id_5">EE</a></div>
</div>

JavaScript代码 #

// 处理页面内带锚点的链接点击事件
$('.subcategories a').on("click", function(e) {
    const hash = this.hash;
    // 仅当链接包含锚点时拦截默认行为
    if (hash) {
        // 判断是否为同页面跳转
        const currentPath = window.location.pathname;
        const targetPath = this.pathname;
        if (currentPath === targetPath) {
            e.preventDefault();
            // 同页面内直接执行带偏移的平滑滚动
            const scrollTop = $(hash).offset().top - 120;
            $('html, body').animate({ scrollTop }, 1000);
        }
        // 跨页面跳转时，浏览器会自动加载目标页面，后续靠页面加载事件处理锚点偏移
    }
});

// 页面加载完成后修正锚点定位
$(window).on('load', function() {
    const targetId = window.location.hash;
    // 检查锚点对应的元素是否存在
    if (targetId && $(targetId).length) {
        // 120为固定头部高度，根据实际项目调整
        const scrollTop = $(targetId).offset().top - 120;
        $('html, body').animate({ scrollTop }, 1000);
    }
});

补充说明 #

• 120是固定头部的高度，需替换为你项目中实际的头部高度值。
• 若不需要平滑滚动效果，可将animate方法替换为直接设置滚动位置：$('html, body').scrollTop(scrollTop);。

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