从当前 url 添加/删除锚点名称而不刷新

Question

我希望在单击事件上附加/删除要添加到当前网址的锚点名称“#on”，而无需重新加载页面，或者使用链接中的 href='#on'，因为它会使我的页面跳转

例如： 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;    
}); 

Answer 1

您实际上并不需要 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 = '';
    }
});

请注意，删除哈希时，尾随的 # 可能会保留在地址栏中。如果你想响应锚点的实时变化，你可以绑定一个回调到hashchange事件：

$(document).bind("hashchange", function(){
    // Anchor has changed.
});

如果你想防止你的页面在清除锚点时跳到顶部，你可以绑定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);
});

Answer 2

如果你使用 jquery 试试这个代码

$("a[href^=#]").on("click", function(e) {
    e.preventDefault();
    history.pushState({}, "", this.href);
});

Answer 3

调用 history.pushState({}, "", link) 与设置 window.location = "#foo" 类似，两者都会创建并激活另一个历史记录与当前文档关联的条目。

请注意，pushState() 永远不会导致触发 hashchange 事件，即使新 URL 与旧 URL 仅在哈希值上有所不同。

const url = new URL(window.location);
url.hash = '#foo';
window.history.pushState({}, '', url);

https://developer.mozilla.org/en- US/docs/Web/API/History/pushState#examples

https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event