append /remove anchor name from current url without refresh

Question

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

Eg: http://www.example.com/page.html#on so I can get the detect the users that come from that url and call the On() function

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;    
}); 

Solution 1

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:

$(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 hashchange event:

$(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/

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);
});

Solution 2

if you are using jquery try this code

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

Comments

[Adrian]

thanks dude, it works fine now, except the part where I want to set the location.hash to nothing, as you said it keeps the # at the end of the url and it makes my page jump to top...kinda annoying but I hope to find a workaround. thanks again ;)

[DarthJDG]

I added a solution to the jumping problem.

[pospi]

Be aware of browser support for the history API - caniuse.com/#search=pushstate (basically, IE10+)

[HamiD]

can you write it down as pure JS please?