Jquery Scroll Divs

[Niplo]

Hi! I’m trying to write something that will take the user down or up to the next (or previous) div on a page. I can figure it out for a single move but unfortunately I don’t have the knowledge to write something that would work across multiple divs.

My Scroll Div Example

IF any one has a solution I would LOVE to hear it!

In addition if anyone knew how to make this also work with the up and down keys my mind would be blown.

Many Thanks!!
Niplo.

[Chromawoods]

Check out this pen: http://codepen.io/chromawoods/pen/CKxkg

The idea is to have a generic class (in my example “section”). And then in the JS, we animate to whatever index in that selection that comes next/previous.

The gotoSection function takes that index integer and animates to it. This means that we could send whatever index we want. For example, maybe at the bottom of the page you want to animate back to the beginning again.

Also added a handler for up/down arrows. I don’t have time to walk you through the whole demo now, but please feel free to shout is there is anything in that example that you don’t understand and I will do my best to explain. Good luck.

[Niplo]

Hey!

Thanks for the response, really great. Works perfectly! I had found this also which was a similar solution:

Scroll Link

Something I hadn’t allowed for was if the user did scroll manually it looses its place with the .selected div. Do you know of a way that would also apply the .selected class if the user scrolls manually? (I appreciate this may over complicate things)

[Author]

Posts