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

DBUK picture DBUK · Jun 14, 2012 · Viewed 8.5k times · Source

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

Christoph picture Christoph · Jun 14, 2012

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.