How to create a animate to specific LI in an UL?

Question

I am using Jquery .animate to scroll a UL up and down so that you can see all the elements, how would i make IF ELSE statement that said.

IF the FIRST LI item in the UL is at the top, dont scroll anymore, and IF the last item is at the bottom of the visible portion of the screen dont scroll any more down, else scroll 510 px.

Right now my code looks like this:

$('#down').click(function() {   
$(".project_thumbs").stop().animate({"top": "-=510px"});
});
$('#up').click(function() { 
if (".project_thumbs" (top = 0)){
    $(".project_thumbs").stop().animate({top:0});
}
else{
    $(".project_thumbs").stop().animate({"top": "+=510px"});
    }

Answer 1

Remy Sharp wrote a plugin for jquery that deals with scrolling and whether or not an element is visible in the viewport or not, you can find it here: http://remysharp.com/2009/01/26/element-in-view-event-plugin/

If you also look at the first comment on that page there is code that adds a selector to jquery for checking whether an element is visible in the viewport (which would probably be of more use to you than the entire plugin), this way you can check whether the bottom LI in your UL (which you could grab by using the :last selector) is in the viewport, then you'd know whether you need to scroll down or not.

Hopefully that's what you were looking for!

Answer 2

U can use a mask to accomplish this. Enclose the ul (position:absolute) inside a div (position:relative, overflow:hidden, height: whatever you need). Then, do some math when you trigger the motion to determine if/when to move based on the height of the ul. (No need to worry about the li's themselves as you can use the ul's block to take care of positioning.)

I set up an example here: http://jsfiddle.net/4nqng/

Basically, this checks to see if the ul's position is able to move based on it's current position relative to the mask and the direction it's being asked to move.