JS中location.reload()后如何跳转到页面指定区域？

以下是几种可行的实现方式，可根据你的场景选择：

方法1：利用URL锚点（哈希值） #

这是最直接的方案，适合固定跳转到某个DOM元素的场景：

• 给目标区域的DOM元素添加唯一id：

  <div id="target-section">
    <!-- 目标区域内容 -->
  </div>
  

• 重载页面时，在URL末尾拼接该锚点。如果通过代码触发重载，可这样写：

  // 设置锚点后重载页面
  window.location.hash = 'target-section';
  window.location.reload();
  

  也可以直接让用户访问带锚点的URL（如your-page.html#target-section），页面重载后会自动滚动到对应id的元素位置。

方法2：用本地存储记录滚动位置 #

如果需要回到重载前的精确滚动位置（而非固定元素），可以用sessionStorage临时保存坐标：

• 监听页面卸载事件，保存当前滚动距离：

  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('scrollPosition', window.scrollY);
  });
  

• 页面加载完成后，读取存储的位置并滚动：

  window.addEventListener('load', () => {
    const savedPos = sessionStorage.getItem('scrollPosition');
    if (savedPos) {
      window.scrollTo(0, parseInt(savedPos));
      // 读取后删除存储内容，避免下次加载重复使用
      sessionStorage.removeItem('scrollPosition');
    }
  });
  

方法3：用scrollIntoView实现精准控制 #

如果需要更灵活的滚动效果（比如平滑滚动、自定义对齐方式），可在页面加载后调用元素的scrollIntoView方法：

window.addEventListener('load', () => {
  const target = document.getElementById('target-section');
  if (target) {
    // 滚动到元素位置，可配置平滑滚动和对齐方式
    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
});

其中behavior: 'smooth'会添加平滑过渡效果，不需要的话可改为'auto'；block参数可设置为'start'（顶部对齐）、'end'（底部对齐）或'center'（居中对齐）。

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