Does onscroll smoothly jump to the next anchor? How?

Question

I am creating a one-page website with several sections, each of which fills the user window; It works for me.

What I want to do:

When the user scrolls up or down, he will relax or lower (respectively) to the section before or after. My sections have an anchor at the top.

Here is an example of what I'm trying to achieve. Each article fills the page. After scrolling, you move on to the next article.

http://www.made-my-day.com/

Answer 1

I think you could do this work with this plugin: https://github.com/alvarotrigo/fullPage.js .

In addition, it seems to be actively updated. The last repo was made 3 days ago.

Hooray!

Answer 2

You should take a look at scrollorama and superscrollorama .

These are many interesting effects that you can use to scroll, including the one you like.

- UPDATE--

After some conversations with the OP, I realized that both libraries do not do what he wants. So my new suggestion is reveal-js , the js presentation library.

Answer 3

You really don't want to do this on onscroll . Consider that onscroll is actually nothing but an event that says "pageview is moving."

This does not mean that they use the mouse wheel to do this.

On the phone, your plan might make sense: then it would be like making the drag and drop movement equal to the swipe movement. Fine.

My preferred method for scrolling through the menu is to click on the middle mouse button, and then place the cursor just below the anchor point, so that I can read each block of text as it scrolls past the screen.

I don’t even need a hand on the mouse, for long blocks.

So, in my case, onscroll will fire for about 60 events / sec, and if you automatically skip articles, I'm going to teleport through all the content on your site.

Other people are still dragging the actual scrollbar.

Listening to the mouse wheel and keys (up / down, pg-up / pg-down), and not just any way to move the page, is safer ...... but you are sure that all articles are going to be small enough to fit all the content to all browser windows, even at silly-low resolutions (iPhone 3)?

Because if people need to scroll to read content, then suddenly you are dealing with a much more complex solution:
You will have to listen to the usual (or customized) scroll requests of any type in order to access the bottom of the current content ...... and then you will have to provide the user with some sort of visual queue, which they are now at the very bottom of the content and continue use the trigger method (swipe / drag / keys / mwheel) to switch articles.

The first two are beautiful ...... make you feel spring-loaded, like smartphones.
... what about the other two, where people can expect them to hit them several times per second to get where they are going?