How to go to a specific element on page

Question

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     lt div id  div element1  gt     yadda yadda   lt  div gt   lt div id  div element2  gt     blah blah  lt  div gt    lt span onclick  focusOnElement  element1     gt Click here to go to element 1 lt  span gt   lt span onclick  focusOnElement  element2     gt Click here to go to element 2 lt  span gt

User · Answer

here is a simple javascript for that

call this when you need to scroll the screen to an element which has id="yourSpecificElementId"

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

and you need this function for the working:

//Finds y value of given object
function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

the screen will be scrolled to your specific element.

User · Answer

The standard technique in plugin form would look something like this    function            fn goTo   function                html  body   animate               scrollTop    this  offset   top    px              fast            return this     for chaining             jQuery     Then you could just say     div element2   goTo    to scroll to  lt div id  div element2  gt   Options handling and configurability is left as an exercise for the reader

User · Answer

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

User · Answer

If the element is currently not visible on the page  you can use the native scrollIntoView   method       div     element id  0  scrollIntoView  true      Where true means align to the top of the page  and false is align to bottom   Otherwise  there s a scrollTo   plugin for jQuery you can use   Or maybe just get the top position   docs  of the element  and set the scrollTop   docs  to that position   var top       div     element id  position   top    window  scrollTop  top

User · Answer

document getElementById  elementID   scrollIntoView      Same thing  but wrapping it in a function   function scrollIntoView eleID       var e   document getElementById eleID      if    e  amp  amp  e scrollIntoView           e scrollIntoView             This even works in an IFrame on an iPhone   Example of using getElementById  http   www w3schools com jsref tryit asp filename tryjsref document getelementbyid

[javascript] How to go to a specific element on page?

Examples related to javascript

Examples related to jquery

Examples related to html