页面重载时自动定位锚点及触发自定义函数的技术咨询

1. 浏览器重载页面时自动定位指定锚点 #

• 默认原生支持：如果当前URL已经包含锚点（比如https://example.com/page#section2），页面重载时浏览器会自动跳转到对应锚点的位置，这是浏览器自带的行为。
• 自定义锚点定位：如果重载前URL没有锚点，但需要跳转到指定位置，可以通过会话存储实现：
  1. 触发重载前，先把目标锚点存入会话存储：

     sessionStorage.setItem('targetAnchor', '#section3');
     

  2. 页面加载（包括重载）时，读取存储的锚点并跳转：

     document.addEventListener('DOMContentLoaded', function() {
       const target = sessionStorage.getItem('targetAnchor');
       if (target) {
         document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
         sessionStorage.removeItem('targetAnchor'); // 用完清除，避免下次加载重复执行
       }
     });
     

2. 识别页面重载并执行自定义函数 #

有两种实用的实现方式：

方式一：利用导航类型判断 #

通过performance API获取页面导航类型，判断是否为重载：

window.addEventListener('load', function() {
  const navEntry = performance.getEntriesByType('navigation')[0];
  if (navEntry.type === 'reload') {
    // 执行你的自定义函数
    myCustomFunction();
  }
});

// 示例自定义函数
function myCustomFunction() {
  console.log('页面重载触发，执行自定义逻辑');
}

注：旧版的window.performance.navigation.type属性已被废弃，但目前多数浏览器仍支持（值为1时表示重载），不过更推荐使用上面的performance.getEntriesByType方法。

方式二：用会话存储标记 #

通过sessionStorage在页面卸载前设置标记，加载时检查并执行函数：

// 页面卸载前标记即将重载
window.addEventListener('beforeunload', function() {
  sessionStorage.setItem('isReload', 'true');
});

// 页面加载时验证标记
window.addEventListener('load', function() {
  if (sessionStorage.getItem('isReload') === 'true') {
    myCustomFunction();
    sessionStorage.removeItem('isReload'); // 清除标记，避免影响后续正常加载
  }
});

这种方式兼容性更强，适合所有支持sessionStorage的浏览器。

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