Скроллер контента или прокрутка текста для сайта на jQuery | XoZblog

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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 атрибут у каждой ссылки.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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 сбросом от Эрика Мейера, чтобы избежать всех недоразумений отображения страницы в разных браузерах.
Рассмотрим основные стили страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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 содержимого, и тд.
Теперь покажу стили навигационной панели:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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 код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(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. Не забывайте оставлять комментарии к статьям и урокам.

P.S.: Моим читателям из Алматы вполне может потребоваться торговое оборудование, например Принтеры этикеток или расходные материалы к ним. Рекомендую заглянуть на страницу к ребятам из A-Trade, большой выбор и подробная техническая информация гарантирована.

Источник статьи/урока: https://xozblog.ru

По материалам: http://speckyboy.com/2012/03/07/scroll-to-internal-link-with-jquery/

Правила перепечатки

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

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

Просмотр демо страницы и скачивание исходников не доступно

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

Стили CSS

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