Question

If I have a structure like:

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

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;.

Answer 1

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

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

jQuery

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

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

CSS

.anitem {
height:100px;
}

#listofstuff {

height:300px;
    overflow:auto;
}

---

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;

    $('#listofstuff').animate({
        scrollTop: scrollAmount
    }, 1000, function() {
        lastElement.addClass('current-last');
    });
});