Take the 2-minute tour ×

If I have a structure like:

<div id="listofstuff">
<div class="anitem">
   <span class="itemname">Item1</span>
   <span class="itemdescruption">AboutItem1</span>
<div class="anitem">
   <span class="itemname">Item2</span>
   <span class="itemdescruption">AboutItem2</span>
<div class="anitem">
   <span class="itemname">Item3</span>
   <span class="itemdescruption">AboutItem3</span>

Say I continue this pattern until item5... and I wanted to make it so that when the page loads, it would search for the div with itemname "Item5", and scroll to it so that it is visible. Assume that the listofstuffdiv is sized small such that only 3 anitems are shown at any given time, but since overflow:auto exists, user can scroll.

I want to make it so that jquery can scroll to the item it found so it is visible without the user having to scroll down to item5;.

share|improve this question
FYI you have loose </h3> in your markup –  Ilia G Jan 7 '12 at 22:00
add comment

2 Answers

up vote 5 down vote accepted

See this fiddle: http://jsfiddle.net/pixelass/uaewc/2/

You don't need the scrollTo plugin for this..


    lastElementTop = $('#listofstuff .anitem:last-child').position().top ;
    scrollAmount = lastElementTop - 200 ;

$('#listofstuff').animate({scrollTop: scrollAmount},1000);


.anitem {

#listofstuff {


with a little more action and variables http://jsfiddle.net/pixelass/uaewc/5/

$(document).ready(function() {
    var wrapper = $('#listofstuff'),
    element = wrapper.find('.anitem'),
    lastElement = wrapper.find('.anitem:last-child'),
    lastElementTop = lastElement.position().top,
    elementsHeight = element.outerHeight(),
    scrollAmount = lastElementTop - 2 * elementsHeight;

        scrollTop: scrollAmount
    }, 1000, function() {
share|improve this answer
Pixelass: Good job ;) –  Julien Lafont Jan 7 '12 at 22:20
just updated my answer.. The scroll was too much.. the height of two divs above should be subtracted (e.g. 200 for this example) –  pixelass Jan 7 '12 at 22:22
Now, your code became a little more complex, maybe it's not necessary to reinvent the wheel, and to use a plugin (2.5k for ScrollTo) ;) A renowned plugin is approved by a lot of people, tested with all browsers, etc. –  Julien Lafont Jan 7 '12 at 22:47
I use the scrollTo plugin a lot. but if this is needed for a static set of elements my first version is probably a lot more lightweight. If this needs to be dynamic, I would probably also use the scrollTo plugin. Even my second version (which is partially dynamic) is a lot lighter. This came in handy for me quite a few times. –  pixelass Jan 7 '12 at 22:55
I am having problems since the .anitems are being dynamically generated after the user clicks on a button. –  Rolando Jan 8 '12 at 3:30
show 7 more comments

You can use a plugin like ScrollTo

And call $.scrollTo with a selector when the page is loaded :

$(document).ready(function() {
    $.scrollTo( $('#listofstuff .aniItem:eq(4)'), 500); // index start with 0
share|improve this answer
add comment

Your Answer


