Плавная прокрутка между экранами jQuery

На некоторых сайтах-одностраничниках можно увидеть эффект связанный с прокруткой мыши. Так, если пользователь двигает колесико вниз, то весь экран сайта смещается на всю его высоту вниз к следующему экрану. А если вверх, то в обратную сторону.

Если сложно понять о чем идет речь, то посмотрите пример эффекта.

Данное смещение можно реализовать смесью Java Script и jQuery. Код я нашел на каком-то форуме и значительно улучшил, заключив его в функцию. Скачав исходники, вы увидите такую html структуру:

<div class="screen screen1">1</div>
...
<div class="screen screen5">5</div>

Если вы захотите сделать фиксированный экран, то просто добавьте div с классом screen и вторым пронумерованным классом screenN, где N - номер экрана. Количество таких экранов можно сделать бесконечно большим.

Если высота содержимого внутри div-а будет больше высоты экрана, то прокрутка пролистает мимо то, что не влезло по высоте. Поэтому данный скрипт лучше использовать для декоративных страниц с небольшим содержимым. Это в частности относится и к мобильной версии, если она будет предусмотрена. Но в ней я бы отключил данный скрипт, например, за счет devise.js.

Еще одной особенностью кода является возможность расчета на лету высоты экрана, если мы изменим размеры браузера. Минусом скрипта я бы отметил неизбежную блокировку колесика мыши и если мы где-то на середине экрана нажмем обновление страницы, то при последующей прокрутки вверх произойдет возврат к самому первому экрану.