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

用户执行某个操作后，页面将重新加载，并且会向该URL添加#someId，因此该URL将类似于localhost/panel/mypage.php#someId，并且作为默认操作，浏览器将跳转到元素的编号为someId。检测页面跳转到特定元素ID

我想要做的是捕捉使用jQuery，然后跳转到#someId元素，而不是跳到它上面的100px，并有能力添加一个平滑的滚动。

这可能吗？

来源

2014-10-10 kfirba

为什么不使用＃以外的东西，您可以使用jQuery从URL中读取并编写相同的效果，而无需重写浏览器的默认操作？ – 2014-10-10 13:21:53

@JamesHunt由于我正在使用的系统具有这种默认行为，我想保留它，除非我真的必须因为不可能这样做。但是，我在你的脑海里想到了你的想法tbh。 – kfirba 2014-10-10 13:24:03

这应该让你开始：

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() { 

});

来源

2014-10-10 13:40:11

谢谢你的回答，但我并没有挣扎如何做动画部分或如何检测动画，但如何删除浏览器的默认行为。无论如何，感谢您的帮助。 – kfirba 2014-10-10 13:54:12

有此hashchange的“窗口”文档对象这正是你需要赶上这一行为有什么事件。您可以使用：

JavaScript解决方案：

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

jQuery的解决方案（V1.8 +）：

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

注：的hashchange事件在t上的URL哈希改变（location.hash）被触发他是同一页面，但不是来自不同的页面，例如从www.example.com/about.html#first转到www.example.com/contact.html#second不会触发hashchange事件。

来源

2016-08-31 11:28:56

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

回答

相关问题