Alex Rivera | Logout

How to go to a specific element on page?

Asked 2011-01-26T05:34:06.320
162

On my HTML page, I want to be able to 'go to' / 'scroll to' / 'focus on' an element on the page.

Normally, I'd use an anchor tag with a href="#something", but I'm already using the hashchange event along with the BBQ plugin to load this page.

So is there any other way, via JavaScript, to have the page go to a given element on the page?

Here's the basic outline of what I'm trying to do:

function focusOnElement(element_id) {
     $('#div_' + element_id).goTo(); // need to 'go to' this element
}

<div id="div_element1">
   yadda yadda 
</div>
<div id="div_element2">
   blah blah
</div>

<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>
javascript jquery html
Edit
Report

1 Answer

21

To scroll to a specific element on your page, you can add a function into your jQuery(document).ready(function($){...}) as follows:

$("#fromTHIS").click(function () {
    $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
    return true;
});

It works like a charm in all browsers. Adjust the speed according to your need.

answered 2012-10-09T08:16:40.327

Your Answer