实现跨页面滚动到锚点且URL不含#锚记的技术求助

Page1 页面处理 #

首先修改跳转链接，通过data-target属性指定Page2上的目标元素ID：

<a href="Page2.html" class="page-link" data-target="Id-on-Page2">跳转到Page2指定位置</a>

添加点击事件逻辑，阻止默认跳转行为，将目标元素ID存入本地存储后手动跳转：

$('.page-link').click(function(e) {
    e.preventDefault();
    // 存储目标元素ID到localStorage
    localStorage.setItem('scrollTarget', $(this).data('target'));
    // 跳转至Page2页面
    window.location.href = $(this).attr('href');
});

Page2 页面处理 #

在Page2加载完成后，读取本地存储的目标标识，执行滚动动画，完成后清除存储值避免影响后续访问：

$(document).ready(function() {
    const targetId = localStorage.getItem('scrollTarget');
    if (targetId) {
        const targetElement = $('#' + targetId);
        if (targetElement.length) {
            // 执行滚动动画，可根据需求调整时长（原代码用0为瞬间滚动）
            $('html, body').animate({
                scrollTop: targetElement.offset().top - 100
            }, 500);
        }
        // 清除存储的目标标识
        localStorage.removeItem('scrollTarget');
    }
});

备选方案（兼容禁用本地存储场景） #

如果担心用户禁用localStorage，可以改用URL查询参数传递目标标识（URL会显示?target=xxx但无#锚记）：

Page1的点击事件修改为：

$('.page-link').click(function(e) {
    e.preventDefault();
    const target = $(this).data('target');
    // 拼接查询参数后跳转
    window.location.href = $(this).attr('href') + '?target=' + target;
});

Page2的读取逻辑修改为：

$(document).ready(function() {
    // 解析URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const targetId = urlParams.get('target');
    if (targetId) {
        const targetElement = $('#' + targetId);
        if (targetElement.length) {
            $('html, body').animate({
                scrollTop: targetElement.offset().top - 100
            }, 500);
        }
    }
});

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