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
</div>

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
</div>

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

$('#jump_to_loc').click(function(){
    var jump = $(this).attr('href');
    var new_position = $('#'+jump).offset();
    window.scrollTo(new_position.left,new_position.top);
    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.

You might also like :

• imagecreatefromjpeg() : gd-jpeg : JPEG library reports unrecoverable error
• How to ignore @ errors in a custom PHP error handler
• div position center of screen
• How to call a javascript function when the name is stored as a variable