Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  Niplo 5 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #165195

    Niplo
    Participant

    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.

    #165236

    Chromawoods
    Participant

    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.

    #165278

    Niplo
    Participant

    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)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star