javascript jump to anchor or element using jquery

Question :
How to use javascript to jump or scroll to an anchor or specific element in your HTML page?

I know some of you were thinking, why not just use the anchor hash trick?
Like this:

<a href="#jump_location_id">Jump to the on-page location</a>

.... random lines of code ...
.... random lines of code ...
.... random lines of code ...
.... random lines of code ...

<div id="jump_location_id">
    Supposed to jump here

While the anchor hash trick is cool, quick and easy, there is one con — it gives you an ugly url containing hashes and id references. So if that matters in your website, here is a javascript solution to jump around on a page while nothing happens to your url:

Answer :
First the HTML :

<a href="jump_location_id" id="jump_to_loc">Jump to the on-page location</a>

.... random lines of code ...
.... random lines of code ...
.... random lines of code ...
.... random lines of code ...

<div id="jump_location_id">
    Supposed to jump here

Then add the following javascript code, which also uses jquery :

    var jump = $(this).attr('href');
    var new_position = $('#'+jump).offset();
    return false;

The key to the effect is the javascript window.scrollTo(x,y) function.

Note: there is also a Jquery plugin that can do this, but I have not tried it yet — I refrain from using too many plugins as I lose track of everything I include and don’t like to clutter my server. The plugin is called ScrollTo.

18 Responses to “javascript jump to anchor or element using jquery”

  1. mAu says:

    There is an easier way: window.location.hash = ‘#jump_to_loc';

    • Nico says:

      Hi mAu. I think you might have misread the post a bit. The whole idea is to jump to a location on the page WITHOUT showing hashtags in the url. window.location.hash adds the hashtag in the url and therefore is not the clean solution we are looking for. Thanks for the comment

  2. azazello says:

    Thx, guys!!! Wery good post!

  3. nightmd says:

    I have implemented this exactly and keep ketting a “page not found” error. I am hosting it locally. Is this something that only works when it is posted to the server? Am I putting the script in the wrong place? A finished html document to view might be quite helpful. Thanks.

    • Nico says:

      Hi nightmd
      If you get a “page not found” then it means the page is trying to reload or load a new page. Our script does not let the page reload but merely scrolls on it. This might be because your jscript or jquery is not active or is not compiling correctly

  4. bird says:

    nice work …really help me out !many thanks

  5. Benji says:

    Pefect! Using it for form validation, user is forced to look at what they did wrong now! Love it!

  6. Veli says:

    neat and elegant! thanks :)

  7. Stefan says:

    Is there a way to use the jquery anchor where the link directs to another page and calls the anchor?

  8. Nico says:

    @Stefan – your javascript loads from scratch on every pageload, so if you wish to do that on a new page you will have to send the anchor id through some other way… perhaps in the url ( Maybe you can try posting the information to the next page, then catch it with your serverside script (PHP, ASP), and set a variable in the javascript.

  9. martin says:

    just what i was looking for, thanks!

  10. Bruno says:

    Exactly what I needed! thanks mate!

  11. Nicholas says:

    Maybe one suggestion. Include the hash in the links href, so if it fails it still does the anchor tag thing. Currently if javascript fails you go to a nonexistent page.

    This also means the hash doesn’t need to be added in the selector(by overloading the hash). Since your returning false from the click handler, it won’t accidentally send you off if the javascript is working, but will still work if javascript fails.

  12. Hey Nico, thanks man! :D

  13. Peeyush says:

    In which case we don’t want to use # ?

  14. Sunny says:

    Hey guys, had a question. I wanted to link to another page with an anchor. But the other page is inside a accordian div. How do I link from one page to another page inside a div?

Leave a Reply to Stefan