跨页面锚点导航失效，如何用原生JS实现无ID的页面内滚动？

方案一：用URL参数替代锚点（推荐） #

直接把跳转链接的锚点改成URL参数，避免锚点对浏览器返回栈的影响，同时在首页加载时读取参数并滚动到目标区域：

1. 修改其他页面的跳转链接
   把原来的 index.html#work 改成 index.html?target=work

2. 在首页添加原生JS代码
   把这段代码放在页面底部，或者监听DOMContentLoaded事件确保DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const targetId = params.get('target');

  if (targetId) {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      // 平滑滚动到目标元素顶部，block参数可选'center'/'end'
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      
      // 如果你更想用scrollTo，也可以这么写：
      // window.scrollTo({
      //   top: targetElement.offsetTop,
      //   behavior: 'smooth'
      // });
    }
  }
});

这个方案的优势：URL不会带锚点，浏览器返回按钮完全正常；scrollIntoView不需要手动计算元素偏移量，比scrollTo更省心。

方案二：修复锚点跳转并清除URL中的锚点 #

如果暂时不想改跳转链接，也可以处理原有锚点，同时移除URL中的锚点避免返回异常：

document.addEventListener('DOMContentLoaded', () => {
  const targetId = window.location.hash.slice(1);
  if (targetId) {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
      // 替换历史记录，去掉URL中的锚点
      window.history.replaceState({}, document.title, window.location.pathname);
    }
  }
});

注意：这个方法需要确保你的work板块已经设置了对应的id="work"属性，否则无法找到目标元素。

新手注意事项 #

• 确保目标元素的id和链接里的参数/锚点完全一致（大小写敏感）
• 把JS代码放在</body>标签前，或者用DOMContentLoaded监听，避免DOM还没加载就执行代码找不到元素
• behavior: 'smooth'是可选的，去掉的话会瞬间跳转，加上是平滑滚动

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