我在URL中经常使用哈希值（#），用于跳转到页面中与该哈希值对应的id相匹配的特定区域。

不过，我想覆盖这个功能，例如：

1. 滚动到目标id上方200像素的位置
2. 修改目标id对应区域的背景颜色
3. 执行我想要的任意其他自定义操作

有没有可以覆盖的监听器之类的东西来实现这个？

我知道在CSS中我可以写：

html {
    scroll-behavior: smooth;
}

，它会滚动到该元素，而不是跳转。但它仍然会把该元素放在页面顶部，这不是我想要的。

同样地，document.getElementById('my-id').scrollIntoView(); 也有把它直接滚动到页面顶部的问题。

如果可以不用jQuery插件（即使用原生JavaScript）来实现，那就更好了。

请注意，我指的是首次加载页面时的行为，而不是在页面中点击链接时的行为；也就是说，当有人加载https://mywebsite.com/foos#section2时，我希望修改后的行为在页面加载时就生效，并滚动到section2上方的一段距离，等等。

解决方案

你可以通过使用 window.onload 事件来检测页面已加载，从而覆盖默认的滚动行为，并据此调整滚动位置。下面给出一个简洁的解决方案：

window.onload = function() {
    const targetId = location.hash.replace('#', ''); // Get the target ID from the URL
    const targetElement = document.getElementById(targetId);

    if (targetElement) {
        // Scroll to a specific position (200px above the element)
        const offset = 200;
        const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
        window.scrollTo({
            top: elementPosition - offset,
            behavior: 'smooth'
        });

        // Optional: Change background color or do other stuff
        targetElement.style.backgroundColor = 'yellow'; // Example
    }
};

这种方法可以在通过URL片段定位到特定区域时，自定义滚动行为并添加任意附加的操作（例如更改背景颜色）。