jQuery 在不刷新的情况下从当前 url 附加/删除锚点名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5928435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
append /remove anchor name from current url without refresh
提问by Adrian
I want that on click event to append/remove the anchor name "#on" to be added to the current url without reloading the page, or use the href='#on' from links because it makes my page jump
我希望点击事件附加/删除锚名称“#on”以添加到当前 url 而不重新加载页面，或者使用链接中的 href='#on' 因为它使我的页面跳转
Eg: http://www.example.com/page.html#onso I can get the detect the users that come from that url and call the On()function
例如：http: //www.example.com/page.html#on这样我就可以检测来自该 url 的用户并调用On()函数
function On()
{
//append to current url the anchor "#on"
}
function Off()
{
//remove from the current url the anchor "#on"
}
$('.on').live('click', function() {
On();
return false;
});
$('.off').live('click', function() {
Off();
return false;
});
回答by DarthJDG
You don't really need jQuery for that, you can get/set the anchor name using location.hash. If you put it in your jQuery ready function, you can do some action if it's set to a certain value:
您实际上并不需要 jQuery，您可以使用location.hash. 如果你把它放在你的 jQuery 就绪函数中，如果它被设置为某个值，你可以做一些动作：
$(function(){
// Remove the # from the hash, as different browsers may or may not include it
var hash = location.hash.replace('#','');
if(hash != ''){
// Show the hash if it's set
alert(hash);
// Clear the hash in the URL
location.hash = '';
}
});
Note that when removing the hash, the trailing #might stay in the address bar. If you want to respond to live changes of the anchor, you can bind a callback to the hashchangeevent:
请注意，删除散列时，尾随#可能会留在地址栏中。如果要响应锚点的实时更改，可以将回调绑定到hashchange事件：
$(document).bind("hashchange", function(){
// Anchor has changed.
});
If you want to prevent your page jumping to the top when clearing the anchor, you can bind the hashchange event to jump back to the previous scroll position. Check out this example: http://jsfiddle.net/yVf7V/
如果你想防止你的页面在清除锚点时跳到顶部，你可以绑定hashchange事件跳回到之前的滚动位置。看看这个例子：http: //jsfiddle.net/yVf7V/
var lastPos = 0;
$('#on').click(function(){
location.hash = 'blah';
});
$('#off').click(function(){
lastPos = $(window).scrollTop();
location.hash = '';
});
$(window).bind('hashchange',function(event){
var hash = location.hash.replace('#','');
if(hash == '') $(window).scrollTop(lastPos);
alert(hash);
});
回答by Alex Doumas
if you are using jquery try this code
如果你使用 jquery 试试这个代码
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
