How Do I Navigate To Hashtag After Page Load?

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 gues

Solution 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.

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

Solution 3:

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;

Solution 4:

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

});

Solution 5:

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