CODEWITHSUNDEEP
jqueryhtml
Bryan
Bryan

Reputation: 8778

Scroll to a particular element w/ jQuery

I have a long list of nested divs. I am passing the ID of a particular element (actually a paragraph element) on the querystring and opening its div and parent onload. However, the list is so long, sometimes the element that opens is hidden below the bottom of the window.

How do I automatically scroll the user's browser window so that the displayed element is at the top of the screen?

You probably don't need this, but for the record... my list looks like this:

<div id="div1">
    <p id="1"></p>   
    <div>stuff</div>
    <p id="2"></p>   
    <div>stuff</div>
    <p id="3"></p>   
    <div>stuff</div>
</div>
...
<div id="divN">
    <p id="997"></p>   
    <div>stuff</div>
    <p id="998"></p>   
    <div>stuff</div>
    <p id="999"></p>   
    <div>stuff</div>
</div>

Upvotes: 6

Views: 6110

Answers (3)

jAndy
jAndy

Reputation: 235962

jQuery:

$(document).ready(function(){
   $(document.body).scrollTop($('#divN').offset().top);
});

Upvotes: 6

Russ Cam
Russ Cam

Reputation: 125488

The easiest way to do this is by using Ariel Flesler's scrollTo plugin. I've used it a few times before and it is small, lightweight and works very well.

Upvotes: 2

nxt
nxt

Reputation: 1983

You could use the scrollIntoView function.

$(document).ready(function() {
  $('#divN').get(0).scrollIntoView();
});

Upvotes: 13

Related Questions