Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll to a particular element w/ jQuery

Tags:

html

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>
like image 264
Bryan Avatar asked Jul 12 '10 19:07

Bryan


2 Answers

You could use the scrollIntoView function.

$(document).ready(function() {
  $('#divN').get(0).scrollIntoView();
});
like image 100
nxt Avatar answered Oct 01 '22 18:10

nxt


jQuery:

$(document).ready(function(){
   $(document.body).scrollTop($('#divN').offset().top);
});
like image 22
jAndy Avatar answered Oct 01 '22 18:10

jAndy