当我有以下内容:
<a name='test'></a>
当我在浏览器中加载一个页面并将
#test
添加到URL中时,浏览器会滚动到<a>
位于页面顶部。
然而,我希望改变这种行为(如果可能的话使用JavaScript)使得使用哈希不会滚动页面 - 我希望它只是什么都不做。有没有一种方法可以在不删除
<a>
元素的情况下这样做?
更新:我需要浏览器仍然发送
onhashchange()
事件,但是不要滚动到<a>
元素。原因是我想覆盖滚动同时保留事件通知。当我有以下内容:
<a name='test'></a>
#test
添加到URL中时,浏览器会滚动到<a>
位于页面顶部。
然而,我希望改变这种行为(如果可能的话使用JavaScript)使得使用哈希不会滚动页面 - 我希望它只是什么都不做。<a>
元素的情况下这样做?
onhashchange()
事件,但是不要滚动到<a>
元素。原因是我想覆盖滚动同时保留事件通知。var curScroll = prevScroll = $(window).scrollTop()
$(window).bind('scroll', function() {
prevScroll = curScroll
curScroll = $(this).scrollTop()
}).bind('hashchange', function() {
$(this).scrollTop(prevScroll)
})
我在这里使用了jQuery来使其跨浏览器工作,并保持页面的onhashchange和onscroll处理程序不变。我发现的一个问题是,如果您两次单击相同的hashtag,它仍会滚动。
更新:我刚找到了更好的解决方案:
$('a').live('click', function() {
if (this.href.split('#')[0] == location.href.split('#')[0]) {
var scrollTop = $(window).scrollTop()
setTimeout(function() {
$(window).scrollTop(scrollTop)
}, 0)
}
})
好吧,你可以尝试粗暴一些:
var i, elems = document.getElementsByTagName('a');
for (i = 0; i < elems.length; i++) {
elems[i].removeAttribute('name');
}
它必须在DOM准备就绪之后但在呈现之前运行,因此您必须将其放在正确的位置。它不适用于“id”属性-仅适用于<a name=...>。
它是否实现了您想要的功能?
onhashchange()
事件,但是不要滚动到<a>
。 - Nathan Osman试试这个:
$( 'a[href="#"]' ).click( function(e) {
e.preventDefault();
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
if (window.location.hash) {
window.scrollTo(0, 0);
}
window.onhashchange
。但问题是这样会总是跳转到顶部,所以它并没有什么作用。 - Felix Kling也许你需要使用一些jQuery和字符串操作
removeHashPartFromString = function() {
...
}
$('a').each(function() {
this.attr('href') = removeHashPartFromString(this.attr('href'));
});
name
属性并手动添加#name
到URL(即不通过点击)? - Felix Kling