Скроллинг к элементу страницы с помощью jQuery

За последние несколько лет серьезно возросла популярность одностраничных (скроллинговых) сайтов. Хотя данный вид сайтов и не для всех, все же полезно знать, как они работают. Сегодня я покажу, как создать простой одностраничный (скроллинговый) сайт с помощью jQuery.

Прежде чем мы начнем, можете посмотреть Demo.

Что ж, приступим…

Создавать будем следующее:

HTML

Разметка (HTML) страницы будет предельно проста.

Сперва создадим навигацию.

HTML

<nav>
<ul>
	<li>
		<a href="#paragraph1">Paragraph 1</a>
	</li>

	<li>
		<a href="#paragraph2">Paragraph 2</a>
	</li>

	<li>
		<a href="#paragraph3">Paragraph 3</a>
	</li>

	<li>
		<a href="#paragraph4">Paragraph 4</a>
	</li>

	<li>
		<a href="#paragraph5">Paragraph 5</a>
	</li>
</ul>
</nav>

Что мы сделали: элемент nav имеет ширину 100%, то есть его ширина будет равна ширине родительского элемента. Для nav свойство position имеет значение fixed, поэтому при скроллинге страницы элемент nav будет всегда перед глазами пользователя. Чтобы создать навигацию мы в тег nav поместили тег ul.

Взгляните на ссылки – они все ведут к одному конкретному параграфу.

Преимущества:

1. Если у пользователя выключен javascript, ссылки все равно работают.
2. При помощи jQuery мы будем считывать атрибут href с каждой ссылки.

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

HTML

<div id="content">

<p id="paragraph1">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit...
</p>
<p id="paragraph2">
In ut sapien sem, a convallis odio. 
Aenean consequat ornare egestas...
</p>
<p id="paragraph3">
Donec sodales diam et libero ultrices ornare... 
</p>
<p id="paragraph4">
Phasellus dolor sem, pharetra nec scelerisque 
sit amet, consequat quis dolor...
</p>
<p id="paragraph5">
Proin varius pellentesque velit, 
at consequat risus hendrerit quis... 
</p>

</div>

Как видите, разметка предельно проста. Она состоит из блока content, который вмещает параграфы (p). Каждый параграф имеет свой id, связанный со ссылкой в нашей навигации.

CSS

Прежде чем приступить к CSS, не забудьте подключить сброс стилей от Eric Meyer's. Он нивелирует проблемы, связанные с межбраузерной несовместимостью, и позволяет работать не задумываясь, будет ли сайт выглядеть одинаково во всех современных браузерах.

Начнем со стилей главного контента страницы, что очень просто.

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;
}

В body определяем текст и цвета фона; блок content имеет ширину 500px и центрирован. Значение для padding-top у блока content равно 40рх – это сделано для того, чтобы навигация не блокировала верхние 40px контента. Высота равна 2000px, чтобы уместить контент и показать скроллинг. Хотя, как правило, в этом нет необходимости. Каждый параграф имеет свойство margin-bottom, равное 25px, чтобы можно было понять, где один параграф заканчивается и начинается другой.

Теперь перейдем к навигации:

CSS

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;
}

Чтобы nav занимал всю ширину браузера, значение его ширины равно 100%. Чтобы nav оставался на экране монитора при скроллинге, он имеет объявление position:fixed. Высота равна 40рх, что вполне нормально для горизонтального верхнего меню. Для придания симпатичного вида был использован простой стиль. ul центрировано и имеет ширину 750рх, чтобы у каждой ссылке было достаточно места. Каждая li создана плавающей, поэтому все ссылки находятся на одной линии. Наконец, для ссылок также назначен простой стиль.

jQuery

Вот, как это будет работать: при клике (click) по навигационной ссылке произойдет скроллинг к тому параграфу, на который указывает ссылка.

Как всегда, начнем с функции document.ready

JQuery

$(document).ready(function(){
 
});

Теперь, прежде чем перейти к функцию click, напишем функцию scrollToDiv, которая будет осуществлять скроллинг к выбранному нами блоку. Параметров будет 2 – элемент, к котрому ведется скроллирование и высота навигацинной панели в верхней части страницы.

JQuery

function scrollToDiv(element,navheight){
 
}

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

JQuery

function scrollToDiv(element,navheight){
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop-navheight;
}

Переменная offset это смещение элемента. Ее использует переменная offsetTop, чтобы вытащить значение top. В результате чего получаем расстояние от верха страницы до элемента. Переменная totalScroll отвечает за расстояние, на которое браузеру необходимо прокрутить страницу. Без верхней панели навигации величина скроллирования будет равна величине offsetTop. Однако при вычислении переменной totalScroll нужно помнить, что наша навигационная панель блокирует верхние 40рх контента. Здесь нам поможет параметр navheight.

Наконец, скроллируем страницу:

$('body,html').animate({
    scrollTop: totalScroll
}, 500);

Функция jQuery animate позволит нам реализовать плавный скроллинг к нужному нам месту страницы. В данном случае на анимацию уходит 500 миллисекунд.

Свойство scrollTop позволяет задать величину, на которую необходимо прокрутить страницу (по вертикали).

Вот полная функция scrollToDiv:

function scrollToDiv(element,navheight){
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop-navheight;
 
    $('body,html').animate({
            scrollTop: totalScroll
    }, 500);
}

Перейдем к функции click.

$('nav ul li a').click(function(){
 
    return false;
});

Это только каркас функции click. Объявлением return false на конце, предотвратит переход браузера по ссылке.

Прежде чем передать элемент функции, для него нужно найти имя.

var el = $(this).attr('href');
var elWrapped = $(el);

Переменная el содержит значение атрибута href. Чтобы jQuery могла использовать переменную el, ее необходимо завернуть в elWrapped. Следующий код jQuery исполнить не может:

#paragraph1.offset();

Но может исполнить это:

$('#paragraph1').offset();

Вот, почему необходима переменная elWrapped.

Полная функция click:

$('nav ul li a').click(function(){
    var el = $(this).attr('href');
    var elWrapped = $(el);
 
    scrollToDiv(elWrapped,40);
 
    return false;
});

Вот и все – теперь у нас есть простая страница с ссылками, при клике по которым происходит скроллинг к нужной части страницы.

По материалам сайта