scroll - Javascript - onscroll moves smoothly to next anchor? How-To? - Stack Overflow

admin管理员组

文章数量:1345055

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.

/

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./

• javascript
• scroll
• position
• fixed

Share Improve this question Follow edited Dec 5, 2012 at 13:46 scvalex 15.4k22 gold badges3535 silver badges4343 bronze badges asked Dec 5, 2012 at 13:26 Leopold KristjanssonLeopold Kristjansson 2,7843535 silver badges5050 bronze badges 2

• are you sure you want to do this? It breaks the default scrolling behaviour that users expect. – Stuart Commented Dec 5, 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. – Leopold Kristjansson Commented Dec 5, 2012 at 23:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

Cheers!

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.

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 plex 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?

本文标签： scrollJavascriptonscroll moves smoothly to next anchor HowToStack Overflow