Vertical scrolling with snap/align to div/element/anchor

问题

I found some lovely websites - http://www.mini.jp/event_campaign/big-point/, http://www.twenty8twelve.com/ and http://www.scozzese.com - all vertical scrolling, and all using a technique that aligns the 'pages' to the top of the browser when you scroll onto a new 'page' - even if you scroll half way into one.

Could anyone give me any pointers e.g. the right terminology/words I could use to search for more info, or a brief intro on the basics behind this technique, or if any jQuery etc plugins exist I can play and learn with?

I did a search of their code but nothing jumped out as how to do it, my Javascript and jQuery are still novice level.

回答1:

Javascript Has some native methods like scroll(), scrollTo(), scrollBy() which (with some tricks) you can use to smoothly scroll the page. Together with offsetTop(), offsetLeft() you can achieve effects like on these sites.

There are also a lot of jQuery Plugins out there (e.g. like this google hit) to save you a lot of work with this.

Just search for these Methodnames, this should give you enough hits I guess.

回答2:

Basic scrolling...

// Scroll
h = $(window).height();
t = $("mydiv").offset().top + $("mydiv").height();

if(t > h) {
    $(window).scrollTop(t - h);
}

回答3:

Their scrolling script isn't very smart. If I scroll the webpage down by repeatedly clicking on the down arrow, every time I click, it scrolls back up. So inevitably it doesn't work.

来源：https://stackoverflow.com/questions/11033053/vertical-scrolling-with-snap-align-to-div-element-anchor