如何覆盖浏览器内置的URL哈希锚点跳转/滚动至ID元素功能

我来帮你搞定这个需求！完全可以用原生JavaScript覆盖页面加载时的默认哈希锚点行为，实现自定义的滚动位置、样式修改等逻辑，不用依赖任何jQuery插件。下面是具体的实现步骤和示例：

页面加载时浏览器会自动跳转到哈希对应的元素，我们要做的就是阻止这个默认行为，然后手动获取哈希对应的元素，执行自己的自定义逻辑。

// 封装处理哈希逻辑的函数
function handleCustomHashBehavior() {
  // 获取当前URL中的哈希（去掉开头的#）
  const targetId = window.location.hash.slice(1);
  
  // 如果没有哈希或者找不到目标元素，直接终止
  if (!targetId) return;
  const targetElement = document.getElementById(targetId);
  if (!targetElement) return;

  // 1. 自定义滚动：滚动到目标元素上方200px的位置
  // 计算目标位置：元素相对于视口的顶部 + 当前页面滚动偏移量 - 自定义偏移
  const offset = 200;
  const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - offset;
  
  // 执行平滑滚动（如果不需要平滑，去掉behavior选项即可）
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });

  // 2. 自定义样式：修改目标元素的背景色
  targetElement.style.backgroundColor = '#f8f9fa';
  
  // 可选：添加高亮动画，3秒后恢复
  targetElement.classList.add('hash-highlight');
  setTimeout(() => {
    targetElement.classList.remove('hash-highlight');
  }, 3000);
}

// 页面DOM加载完成后执行初始处理
document.addEventListener('DOMContentLoaded', () => {
  // 先重置滚动位置，避免浏览器已经完成默认跳转
  window.scrollTo(0, 0);
  handleCustomHashBehavior();
});

// 可选：监听哈希变化事件，处理用户后续修改URL哈希的情况
window.addEventListener('hashchange', handleCustomHashBehavior);

• 阻止默认跳转：通过在DOM加载完成后先执行window.scrollTo(0, 0)，重置滚动位置，覆盖浏览器的默认锚点跳转行为。
• 计算自定义滚动位置：用getBoundingClientRect().top获取元素相对于视口的顶部位置，加上window.pageYOffset（当前页面滚动的垂直距离），再减去你想要的偏移量（比如200px），得到最终的滚动目标位置。
• 自定义逻辑扩展：除了滚动和修改背景色，你还可以在这里添加任何需要的逻辑——比如添加动画类、显示提示框、加载额外内容等。
• 哈希变化监听：如果需要处理用户手动修改URL哈希的情况，加上hashchange事件监听即可，逻辑和初始加载一致。

如果你的页面有固定顶部导航栏，完全可以把偏移量设置为导航栏的高度，这样目标元素就不会被导航栏挡住，这也是非常实用的场景：

// 获取导航栏高度作为偏移量
const navbar = document.getElementById('fixed-navbar');
const offset = navbar.offsetHeight;

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