检测页面跳转到特定元素ID

Question

用户执行某项操作后，页面会重新加载并向网址添加#someId，因此网址类似于localhost/panel/mypage.php#someId，默认操作时，浏览器会跳转到id为someId的元素。

我想要做的是使用jQuery捕获它，然后不是直接跳到#someId元素，在它上面跳100px并且能够添加平滑滚动。

这可能吗？

Answer 1

“window”文档对象的这个 hashchange 事件正是您捕获此行为所需的。您可以使用：

1. Javascript解决方案：

   window.addEventListener('hashchange', function(){
   // smooth scroll code
   });
   

2. jQuery解决方案（v1.8 +）：

   jQuery(window).on('hashchange', function(){
   // smooth scroll code
   });
   

注意： hashchange 事件在同一页面上的url哈希更改（location.hash）上触发，但不会从其他页面触发，例如从www.example.com/about.html#first转到www.example.com/contact.html#second不会触发 hashchange 事件。

Answer 2

这应该让你开始：

var a_hash = window.location.hash;
var offset = $(a_hash).offset();
if(offset.top > 100){
    offset.top = offset.top - 100;
}
var body = $("html, body");
body.animate({scrollTop: offset.top}, '500', 'swing', function() { 

});