How can I get to a specific page element? [duplicate]

Problem

I want to be able to ‘navigate to’,’scroll to,’ and ‘concentrate on’ an element on my HTML page.

Normally, I’d use an anchor tag with a href=”#something,” but I’m already loading this page with the hashchange event and the BBQ plugin.

Is there any other method to direct the browser to a certain element on the page using JavaScript?

Here’s the gist of what I’m attempting to accomplish:

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>

Asked by Cuga

Solution #1

You can utilize the native scrollIntoView() method if the element is currently hidden on the page.

$('#div_' + element_id)[0].scrollIntoView( true );

True indicates that the text should be aligned to the top of the page, whereas false indicates that it should be aligned to the bottom.

If you don’t want to utilize jQuery, you can use the scrollTo() plugin.

Alternatively, retrieve the element’s top position()(docs) and set the scrollTop()(docs) to that position:

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

Answered by user113716

Solution #2

In plugin form, the conventional technique would look like this:

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
})(jQuery);

Then all you have to do is say $(‘#div element2’). To navigate to div id=”div element2″>, use goTo(). The reader is left to their own devices when it comes to handling options and configurability.

Answered by mu is too short

Solution #3

document.getElementById("elementID").scrollIntoView();

Essentially the same idea, but wrapped in a function:

function scrollIntoView(eleID) {
   var e = document.getElementById(eleID);
   if (!!e && e.scrollIntoView) {
       e.scrollIntoView();
   }
}

On an iPhone, this also works in an IFrame.

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref document getelementbyid&filename=tryjsref document getelementbyid&filename=tryjsref document getelementbyid&filename=tryjsref document getelementbyid&filename=tryjsref document getelement

Answered by GlennG

Solution #4

Here’s a quick javascript for that.

When you need to scroll the screen to an element with the id=”yourSpecificElementId,” use this method.

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

and you’ll need this function to do your job:

//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];
    }
}

Your element will be scrolled to the top of the screen.

Answered by AnhSirk Dasarp

Solution #5

You can use a function in your jQuery to scroll to a certain element on your page (document). as follows: ready(function($)…): ready(function($): ready(function($): ready(function($):

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

It works flawlessly in all browsers. Adapt the pace to your need.

Answered by lorddarq

Post is based on https://stackoverflow.com/questions/4801655/how-to-go-to-a-specific-element-on-page