如何让导航栏锚点链接从其他页面也能跳转到首页对应锚点位置

1. 修改导航栏HTML链接 #

先把导航链接的href属性补充为首页路径+对应锚点，同时保留原有的data-goto、类名属性，兼容首页已有的平滑滚动逻辑。
如果你的首页是站点根目录，修改后代码如下：

<li role="presentation" class="nav-item active">
   <a href="/#portfolio" class="nav-link scroll" data-goto="portfolio">Portfolio</a>
</li>

如果你的首页路径是/index.html，把href改为/index.html#portfolio即可，其他首页路径同理对应调整。

2. 调整原有平滑滚动JS逻辑 #

你原来的JS逻辑应该是监听了.scroll类链接的点击，直接阻止了默认跳转行为，才会导致非首页点击链接无响应。只需要加一层判断：仅在首页时执行平滑滚动逻辑、阻止默认跳转，非首页直接走默认跳转行为即可。
参考JS代码如下：

document.querySelectorAll('a.nav-link.scroll').forEach(link => {
  link.addEventListener('click', function(e) {
    const targetAnchor = this.dataset.goto;
    // 可根据你的站点实际首页路径调整判断条件
    const isHomePage = window.location.pathname === '/' || window.location.pathname === '/index.html';
    // 仅首页存在对应锚点元素时，才走自定义平滑滚动逻辑
    if (isHomePage && document.getElementById(targetAnchor)) {
      e.preventDefault();
      // 此处保留你原来的平滑滚动逻辑即可，示例如下：
      document.getElementById(targetAnchor).scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
      // 原有切换导航active状态的逻辑也可以保留在此处
    }
  })
})

3. 可选优化：避免锚点内容被导航栏遮挡 #

如果你的导航栏是固定定位，默认跳转后锚点顶部会被导航遮挡，可以给首页的锚点区域添加CSS属性解决：

#portfolio {
  /* 数值调整为你的导航栏实际高度即可 */
  scroll-margin-top: 80px;
}

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