CODEWITHSUNDEEP
javascriptjqueryscrollscrolltolistitem
Arrowcatch
Arrowcatch

Reputation: 1652

Scrolling to next element in container - almost there

I'm struggling with a jquery problem.

I think I am close to a solution but I keep stumbling at the moment.

So my markup (simplyfied) looks like this:

<div class="col">
    Content
   <div class="scroll-container">
      <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
      </ul>
   </div>
<a href="#" class="scroll">scroll down</a>
</div>

Basically a .col that holds a container and a button.

The Plan:

1) After a click on the button container should scroll down to the next <li>.

2) When the last <li> is reached it scrolls to the first <li> again. So I need a loop.

3) The numbers and size of <li> may change from case to case. So basically the button should just scroll the next <li> to the top of the container.

4) The scrolled <li> needs to have a little margin to the top edge of the container.

Where I am:

I had a similar problem which got brilliantly solved by ronalchn and since the problem is somewhat similar I have created a fiddle based with his code.

Fiddle with the solved problem (To see the code in action)

Fiddle with the this problem (Obviously doesn't work with the same jquery)

I think the code basically only needs a little rearranging to work with the new situation.

I have tried for a couple of hours but it seems like this is still beyond my current level of understanding jquery.

I am very greatfull for any push in the right direction. Thank you.

Upvotes: 1

Views: 1250

Answers (1)

Royce Feng
Royce Feng

Reputation: 1663

Here you go: http://jsfiddle.net/UQsv9/7/

CSS changes: added position: relative to your ul

I'm using $.fn.data to store the current child, from there it's just using the difference between the two offsets to calculate the new top.

Upvotes: 1

Related Questions