如何通过JavaScript跳过页面内锚点导航，直接返回来源页面

嘿，刚入门JS和Web开发遇到这个问题太正常了！我来给你拆解下为啥默认的window.history.back()或history.go(-1)不好用，以及几种可行的解决办法：

首先得搞懂根源：浏览器会把每个页面内的锚点跳转（比如从www.secondpage.com#id1跳到www.secondpage.com#id2）都当成一条独立的历史记录存进会话栈里。所以你调用返回方法时，只会回到上一个锚点位置，而不是最初的来源页www.firstpage.com。

下面是几种实用的解决方案，你可以根据自己的场景选：

方法1：直接跳转到来源页（最简单直接） #

如果你的场景里用户确实是从某个页面跳过来的，可以直接用document.referrer获取来源页的URL，然后跳转过去：

function goBackToOriginPage() {
  const originPage = document.referrer;
  if (originPage) {
    window.location.href = originPage;
  } else {
    // 处理来源为空的情况（比如用户直接打开当前页面）
    alert('无法获取来源页面，将跳转到首页');
    window.location.href = '/'; // 这里换成你的首页URL
  }
}

注意：如果用户是通过书签、手动输入URL或者跨域页面跳过来的，document.referrer可能是空字符串，所以一定要加个兜底逻辑。

方法2：计算后退步数，跳过所有锚点记录 #

如果用户在当前页面只做了锚点跳转，没跳去其他页面，可以在页面加载时记录初始的历史栈长度，返回时计算需要后退的总步数：

// 页面加载完成后记录初始历史长度
let initialHistoryLength;
window.addEventListener('load', () => {
  initialHistoryLength = window.history.length;
});

// 自定义返回函数
function goBackToOrigin() {
  if (!initialHistoryLength) return;
  // 计算需要后退的步数：当前历史长度 - 初始历史长度
  const steps = history.length - initialHistoryLength;
  window.history.go(-steps);
}

适用场景：适合你能确定用户在当前页面只有锚点操作的情况，比如单页内的导航页面。如果用户中途跳去了其他页面再回来，这个计算就会出错哦。

方法3：拦截锚点跳转，避免新增历史记录（适合自己开发的页面） #

如果你能控制页面内的锚点链接，可以修改它们的点击行为，用history.replaceState代替默认的锚点跳转——这样锚点变化不会新增历史记录，之后调用history.back()就直接回到来源页了：

// 获取所有页面内的锚点链接（href以#开头的）
const anchorLinks = document.querySelectorAll('a[href^="#"]');

anchorLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的锚点跳转行为
    const targetId = this.getAttribute('href').slice(1); // 去掉#号
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 平滑滚动到目标元素（可选，也可以直接滚动）
      targetElement.scrollIntoView({ behavior: 'smooth' });
      // 更新URL的锚点部分，但不新增历史记录
      history.replaceState(null, document.title, `#${targetId}`);
    }
  });
});

优势：这种方法从根源上解决了锚点干扰历史栈的问题，之后不管点多少次锚点，history.back()都能直接回到来源页。

你可以根据自己的实际情况选其中一种方法试试，记得多测试几种场景（比如直接打开页面、跨域跳转过来的情况）哦！

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