Прокрутка страницы с jQuery

В этой статье речь пойдёт о прокрутке страницы с помощью jQuery.
Для начала нам необходимо подключить jQuery на нашу страницу. Воспользуемся ссылкой на google code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Теперь приступим к добавлению прокрутки на страницу.

Во первых добавим наш элемент при нажатии на который будет прокручиваться страница. В моём примере это будет div.

<div id="scrolling" class="scroll">Scroll</div>

В наш сss добавим стили для класса scroll

.scroll{
   position: fixed;  
   bottom: 0px;
   height: 50px;
   width: 100%;
   border: 1px solid black;
}

Теперь добавим сам скрипт который будет отвечать за прокрутку страницы вниз (на высоту окна)

jQuery(document).ready(function() {
    var height = jQuery(window).height();
    jQuery('#scrolling').click(function(){
      jQuery('html, body').animate({scrollTop: height + 'px'}, 800);
      height += height;
    });
});

Всё, теперь наша страница будет плавно прокручиваться вниз, при клике на наш div элемент.
Если стоит задача, плавно прокручивать страницу вверх необходимо использовать следующий код

jQuery(document).ready(function() {
    jQuery('#scrolling').click(function(){
       jQuery('html, body').animate({scrollTop: '0px'}, 800);
    });
});

Happy coding!