How do I navigate to hashtag after page load?

Question

I want to do the inverse of what I've been finding so far. I'm setting a lot of heights with js and I want to navigate to the hashtag in the url after the page has loaded. I'm guessing this is simple but I'm not seeing the obvious answer... for an example, check here...

http://alavita.rizenclients.com/#story

Attempted this using the code...

$(window).load(function() {
    var hashTag = window.location.hash;
    window.location = '/' + hashTag;
}); 

doesn't actually take me to the top of the tagged section...

Answer 1

If you simply want to change the hash after page loads:

window.onload = function (event) {
    window.location.hash = "#my-new-hash";
};

If you want to navigate to the URL with new hash:

window.location.href = "http://website.com/#my-new-hash";

If you want to listen for changes in the hash of the URL; you can consider using the window.onhashchange DOM event.

window.onhashchange = function () {
    if (location.hash === "#expected-hash") {
        doSomething();
    }
};

But it is not supported by every major browser yet. It now has a wide browser support. You can also check for changes by polling the window.location.hash on small intervals, but this is not very efficient either.

For a cross-browser solution; I would suggest Ben Alman's jQuery hashchange plugin that combines these methods and a few others with a fallback mechanism.

EDIT: After your question update, I understand you want the page to scroll to a bookmark?:

You can use Element.scrollTop or jQuery's $.scrollTop() method.

$(document).ready(function (event) {
    var yOffset = $("#my-element").offset().top;
    $("body").scrollTop(yOffset);
});

See documentation here.

Answer 2

For some reason both MS Edge 42 and IE 11 will not scroll to the new bookmark for me, even when doing a window.location.reload(true) after setting the new bookmark. So I came up with this solution: insert this script on the page you're loading (requires jquery)

$(document).ready(function() {
 var hash = window.location.hash;
 if (hash) {
  var elem = document.getElementById(hash.substring(1));
  if (elem) {
   elem.scrollIntoView();
  }
 }
});

Answer 3

Using scrollTo or scrollIntoView will not respect any offset created by the :target css selector, which is often used to make the page scroll to just above the anchor, by setting it to position: relative with a negative top.

This will scroll to the anchor while respecting the :target selector:

if (location.hash) {
    window.location.replace(location.hash);
}

Answer 4

You could just set the current location:

window.location = 'http://alavita.rizenclients.com/#story';

Or set the hash (if it isn't already), then reload:

window.location.hash = hashTag;
window.location=window.location.href;

Answer 5

You changed your question.

Check out this solution. https://stackoverflow.com/a/2162174/973860 so you understand what is going on and how to implement a cross browser solution.

NOTICE: At the bottom he mentions a jquery plugin that will do what you need.

http://benalman.com/projects/jquery-hashchange-plugin/

This plugin will allow you to do something like this. This will work for your current page. But you may want to modify it to be more robust.

$(function(){

    // Bind the event.
    $(window).hashchange( function(){
        // get the hash
        var hash = window.location.hash;
        // click for your animation
        $('a[href=' + hash + ']').click();
    })

    // Trigger the event (useful on page load).
    $(window).hashchange();

});