导航栏点击跳转至index.html后，如何实现滚动到指定位置？

你的问题核心在于：跳转页面后原页面的JS会立即终止执行，所以第一段代码里的scrollTo根本不会在新页面生效；第二段把滚动逻辑放在全局，自然每次加载页面都会触发，不符合需求。

正确的实现要分两步走：

1. 点击按钮时，跳转到带锚点标记的index.html
2. 在index.html中，监听页面加载事件，根据URL锚点触发平滑滚动

第一步：修改按钮所在页面的代码 #

把点击事件改成跳转到带锚点的目标地址：

const pcNav = document.querySelector('#pcAboutButton');

pcNav.addEventListener('click', () => {
  location.href = "index.html#aboutImage";
});

第二步：在index.html中添加滚动逻辑 #

在index.html的脚本里加入这段代码，仅当URL包含指定锚点时才触发滚动：

window.addEventListener('load', () => {
  if (window.location.hash === '#aboutImage') {
    const aboutImage = document.querySelector('#aboutImage');
    if (aboutImage) {
      // 平滑滚动到目标元素，block参数可调整对齐方式（start/center/end）
      aboutImage.scrollIntoView({ behavior: 'smooth', block: 'start' });
      
      // 如果需要额外偏移量（比如你之前的+500），可以加这段延迟调整
      // setTimeout(() => {
      //   window.scrollBy({ top: 500, behavior: 'smooth' });
      // }, 100);
    }
  }
});

补充说明 #

• 用scrollIntoView比手动计算offsetHeight更可靠，它会自动适配元素位置
• 额外偏移量的延迟是为了确保scrollIntoView的滚动完成后再调整，避免冲突
• 这种方式只有通过带锚点的链接进入页面时才会触发滚动，正常访问不会自动滚动

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