jquery scroll content with stop function

Question

Hi,

I have a div with a height of 200px (viewport). Inside this div there is a ul>li list with many links. Now I have 2 arrows to push/scroll this content up and down.

I'm using this kind of code (will be changed into bind- events):

$("#jq-manufactors_bot").click(function() {
    $("#manufactors .toggle").animate({marginTop: "-=100"},400);
  });

  $("#jq-manufactors_top").click(function() {
    $("#manufactors .toggle").animate({marginTop: "+=100"},400);
  });

Now I'm not sure how to implement a function, to stop scrolling the content, when the end/beginning is reached. With height() I can get the current height of the list. I need something where I can compare this height with the scrolled way to stop it just in time.

thx TC

Answer 1

I'd use a jQuery plugin like scrollTo if I were you. It's pretty powerful and lightweight.

Checkout the demos too

Answer 2

can't post the images yet so you'll have to go to the link to see the doodles which are critical hehe

http://i49.tinypic.com/33az0bo.jpg

so what you are looking for is the offset, and what you don't want to happen is that offfset can't get bigger then the difference of list height and wrapper height

assuming that offset is negative:

if(offset < wrapperHeight - listHeight)
  offset = wrapperHeight - listHeight;

for positive you'd have to use greather then and listHeight - wrapperHeight

you'll have to include this proportions calculation in your click to prevent going out of bounds

hope it helps,

cheers Tomas