Javascript - onscroll moves smoothly to next anchor? How-To?

Asked 5/12, 2012 at 13:26 Answered 14/10, 2013 at 8:37

I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.

What I want to do is:

When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.

Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.

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

Boyfriend answered 5/12, 2012 at 13:26 Comment(2)

are you sure you want to do this? It breaks the default scrolling behaviour that users expect. – Hasten 5/12, 2012 at 13:50

For what I want to use this for I'm sure. It's a very simple and short page. Kind of a design experiment rather then an informative site. – Boyfriend 5/12, 2012 at 23:36

I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.

Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.

Cheers!

Samellasameness answered 14/10, 2013 at 8:37 Comment(0)

You should take a look at scrollorama and superscrollorama.

They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.

--UPDATE--

After some talking with OP, I realized that both libraries don't do what he wants. So, my new suggestion is reveal-js, a js presentation library.

Atli answered 5/12, 2012 at 14:1 Comment(5)

Lot's of nice scrolling things on there for sure, but I didn't really find this one though? Am I missing something obvious? – Boyfriend 5/12, 2012 at 15:32

What you wanna do is just like "Pin it" on both scrollorama and superscrollorama, isn't it? – Atli 5/12, 2012 at 17:10

Not really. What happens on the example-site I posted (made-my-day.com) is that once you start scrolling with the mouse wheel (or two fingers on your mouse-pad etc) you start "paging" between articles. Each article always fills the screen exactly.This way you are never halfway between two articles, instead you always have them in full view... – Boyfriend 5/12, 2012 at 23:32

@LeopoldKristjansson sorry about that, when i looked in the site the first time, for some reason i thought it was like to pin it. [Here](lab.hakim.se/reveal-js) is another library that is not exactly the same as the same, but it's the best match I can think of. I'm editing my answer to include it – Atli 10/12, 2012 at 13:18

The reveal-js library looks more like it! Thank you so much sir! – Boyfriend 13/12, 2012 at 10:50

You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".

That doesn't mean that they're using the mousewheel to do it.

On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.

My preferred method for scrolling is to click the middle-mouse button, and then position the mouse 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 at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.

Other people still drag the actual scrollbar.

Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?

Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.

The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?

Ploughboy answered 5/12, 2012 at 14:24 Comment(1)

Thanks for the tips! On the website I'm building you have very little text/info on each section - which basically means it works on very small mobile screens already (at least all the ones I've tested it on). It also uses Media-Queries and has slightly different versions for mobile. – Boyfriend 5/12, 2012 at 15:12

Recommended topics

Hot tags