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

Question

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.

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

Answer 2

Basic scrolling...

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

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

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