CODEWITHSUNDEEP
jqueryhtml
Rolando
Rolando

Reputation: 62596

How to auto scroll to target div with jquery?

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

Upvotes: 7

Views: 52932

Answers (2)

user950658
user950658

Reputation:

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');
    });
});

Upvotes: 11

Julien Lafont
Julien Lafont

Reputation: 7877

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
});

Upvotes: 1

Related Questions