Скроллер контента для сайта на jQuery

Здравствуйте уважаемые читатели XoZblogа! В сегодняшнем уроке разберем создание очень простого, но в тоже время удобного, а главное нужного скроллера (прокрутчика) контента на сайте. В последнее время стало очень модным делать сайты только одной страницей, и использовать в главном меню ссылки на параграфы в этом документе. Так вот давайте рассмотрим пример создания такого прокрутчика страницы на jQuery. Для большей наглядности посмотрите Демо страницу и посмотрите как происходит прокрутка текста, а также не забудьте скачать Исходники.



Прокрутка текста на jQuery

Первым делом разметка

Эта страница будет иметь очень простой HTML. Прежде всего, давайте построим навигационную панель.

<nav>
    <ul>
        <li>
            <a href="#paragraph1">Параграф 1</a>
        </li>
        <li>
            <a href="#paragraph2">Параграф 2</a>
        </li>
        <li>
            <a href="#paragraph3">Параграф 3</a>
        </li>
        <li>
            <a href="#paragraph4">Параграф 4</a>
        </li>
        <li>
            <a href="#paragraph5">Параграф 5</a>
        </li>
    </ul>
</nav>

Вот в чем идея: навигационная панель имеет ширину в 100%, это на всю ширину окна браузера. А также position: fixed, так что она не «уезжает», а остается на одном месте.

Обратите внимание на ссылки — все они имеют уникальный якорь-метку.
Это полезно по двум причинам:

  • Если в браузере пользователя отключен JavaScript, ссылки все равно работают.
  • С помощью jQuery, мы будем читать HREF атрибут у каждой ссылки.

И так, у нас есть навигационная панель, и мы можем сделать основное содержание страницы.

<div id="content">
 
    <p id="paragraph1">
         Контент 1 параграфа...
    </p>
    <p id="paragraph2">
         Контент 2 параграфа...
    </p>
    <p id="paragraph3">
         Контент 3 параграфа...
    </p>
    <p id="paragraph4">
         Контент 4 параграфа...
    </p>
    <p id="paragraph5">
        Контент 5 параграфа...
    </p>

</div>

Разметка так сказать совсем не замысловата. Указываем в id тега p (параграфа) тот якорь-метку, который находится в атребуте href ссылок навигационной панели, но уже без знака #, вот и все.

Стили CSS

Прежде чем переходить к стилям, воспользуемся CSS сбросом от Эрика Мейера, чтобы избежать всех недоразумений отображения страницы в разных браузерах.
Рассмотрим основные стили страницы:

body {
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
background: #fdfdfd;
}
 
#content {
width: 500px;
margin: 0 auto;
padding-top: 40px;
height: 2000px;
}
 
#content p {
margin-bottom: 25px;
}

У тела страницы устанавливаем шрифт и цвет фона, для DIVa, в котором будут параграфы с контентом устанавливаем ширину в 500px, и положение по центру. Также отступ сверху в 40px — это для того чтобы навигационная панель не блокировала верхние 40px содержимого, и тд.
Теперь покажу стили навигационной панели:

nav {
width: 100%;
position: fixed;
height: 40px;
background: white;
border: 1px solid #CACACA;
border-top: none;
-webkit-box-shadow: 0px 0px 3px 1px #ebebeb;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;
}
 
nav ul {
width: 750px;
margin: 0 auto;
}
 
nav ul li{
float: left;
width: 150px;
text-align: center;
}
 
nav ul li a {
line-height: 40px;
font-size: 16px;
text-decoration: none;
color: #515151;
border-bottom: 1px dotted #515151;
}
 
nav ul li a:hover{
color: #000;
}

Ну стили навигационной панели мы обсуждали практически в самом начале не будем заострять на этом внимание. Скажу лишь, что в качестве меню используем список ul, который имеет ширину 750px, а каждый элемент списка li имеет обтекание справа, так что все ссылки выстраиваются в одну строку.

JQuery код прокрутки

Вот как это будет работать: Отслеживаем действие щелчок по пункту меню, а потом передаем значение атрибута href в функцию scrollToDiv для прокрутки именно к этому параграфу.
Вот код jQuery код:

$(document).ready(function(){
   
   $('nav ul li a').click(function(){
   
      var el = $(this).attr('href');
      var elWrapped = $(el);
     
      scrollToDiv(elWrapped,40);
     
      return false;
   
   });
   
   function scrollToDiv(element,navheight){
   
      var offset = element.offset();
      var offsetTop = offset.top;
      var totalScroll = offsetTop-navheight;
     
      $('body,html').animate({
          scrollTop: totalScroll
      }, 500);
   }
});

Разберем его. Когда происходит щелчок по ссылке, в переменную elWrapped записывается значение атрибута href, то есть уникальный якорь-метка и вызывается функция scrollToDiv с двумя параметрами одним из которых является, этот самый якорь. Что происходит в функции scrollToDiv. В переменную offset, с помощью одноименного метода, записываем записываем текущее положение якоря-метки по отношению к документу. А после указываем, что необходимо для отступа сверху (переменная offsetTop) установить значение 40 (то есть отступить сверху 40px, это переменная totalScroll=offsetTop-navheight, где navheight это второй параметр функции scrollToDiv).

После чего используя метод animate() прокручиваем страницу (с задержкой 500 миллисекунд) до нужного параграфа, с отступом сверху 40px. Вот и все!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или следите за мной в Twitter. Не забывайте оставлять комментарии к статьям и урокам. Если урок Вам понравился и пригодился сделайте tweet или like — тем самым Вы выразите свою благодарность. До связи!

P.S.: правильный монтаж гипсокартонной перегородки своими руками

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

  • Удобный скрипт,особенно для электронных читалок,только можно было бы помечать самому пользователю важные места и потом к ним ворачиваться!

    • Дмитрий Кочетов

      Интересная идея, Александр! Можно поискать в сети готовые решения или попытаться написать самому) а как альтернатива 1 пункт в ЭТОМ СПИСКЕ

  • Можно вопрос? этот скипт можно использовать для разделения статьи на блоге по параграфам?

    • Дмитрий Кочетов

      Конечно можно, на параграфы поставить айдишники и добавить их к ссылкам в качестве анкоров. единственное что могут быть небольшие проблемы с плавающей панелью, а так реализовать на блоге можно!

  • спасибо! надо будет попробовать=)

    • Дмитрий Кочетов

      пожалуйста. Заходите еще)