Highlight the element I enter with its id

Question

I want something that is so close to the thing we have in stackoverflow. Consider i have a page like this : "myPage.com". then consider that after a search i want to redirect the user to this page but exactly on the desired element, like this : "myPage.com#123". As you know the "123" is the id of the element i want the page to scroll to it. but the thing is that scrolling is not enough. I want to do additional jobs with JQuery and i want to know how can i add event handlers to this. And being more direct, what is this event?

Answer 1

You can add an event listener to the load event. and then get the Anchor (the #123) and then do whethever you want with it.

For the scrolling, the #123 is enough for the browser to understand what you want.

Answer 2

Simplest way to do that is to check hash on document ready like this:

$(function() {
    // assign value of hash to hash variable
    var hash = window.location.hash;

    // check if hash isn't undefined
    if (hash) {
        // target element with id from hash
        var $where = $(hash);
        // animate scroll to position of element from hash
 $('html, body').animate({ scrollTop: parseInt($where.position().top) + 'px' }, 300);
    } else {
        // there is no hash ;-)
 alert('no hash');
    }
});

There is also onhashchange event:

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange