Ранее вы узнали, как создать кнопку “вверх”, а сейчас речь пойдет о “якорных” ссылках и о том, как создать плавную прокрутку на странице.
Якорная ссылка (anchor link) — это ссылка, при клике на которую страница прокручивается к нужному месту, адрес страницы при этом не меняется.
Якорные ссылки
Формат якорной ссылки прост, вместо адреса страницы нужно указать id блока на странице, к верхнему краю которого вы хотите прокрутить страницу:
<a href="#contacts">Контакты</a>
По клику страница проскроллится к блоку с id="contacts"
:
<div id="contacts">...</div>
Такой формат очень удобен для:
- страниц с большим количеством текста
- лендингов (“посадочных” страниц)
- прокрутки страницы к верхнему краю
Плавная прокрутка
Кода выше достаточно для того, чтобы все работало, но я хочу, чтобы страница прокручивалась плавно. Это сделать просто, нам в этом поможет jQuery.
Не все ссылки на странице будут якорными, поэтому в селекторе укажем только ссылки, где в атрибуте href
встречается символ #
:
$('a[href*="#"]').click(function(){ });
Закешируем селектор тела страницы, чтобы он не вызывался каждый раз при клике:
var $page = $('html, body');
Ну а далее добавим анимацию и в результате получим такой код:
var $page = $('html, body'); $('a[href*="#"]').click(function() { $page.animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 400); return false; });
Смена адреса страницы
По клику на ссылке мы не делаем ничего, кроме прокрутки, поэтому адрес хеш в адресе страницы не изменится (например, index.html
не поменяется на index.html#contacts
). Если вы хотите, чтобы адрес страницы также обновлялся при переходе к якорю, то после выполнения скролла добавьте смену адреса:
var $page = $('html, body'); $('a[href*="#"]').click(function() { var href = $.attr(this, 'href'); $root.animate({ scrollTop: $(href).offset().top }, 400, function () { window.location.hash = href; }); return false; });
Посмотреть и скачать
Как видите, урок очень простой. Смотрите скрипт в действии и скачивайте материалы урока чтобы разбираться дальше. Успехов.
Было бы полезно добавить в скрипт еще такой момент, чтобы при переходе к якорю можно было выставлять отступ “до якоря” в пикселях. То есть, например, ставим якоря в начале материала, но у него есть еще и заголовок. Соответственно если мы перейдем к якорю, то заголовок проскроллится за верхнюю границу окна браузера.
@Karl, или просто добавьте
padding-top
для цели якоря :)Назар, напиши, пожалуйста, сам код. Я начинающий в jQuery. Не могу понять куда именно нужно вставлять padding-top.
scrollTop: $($.attr(this, ‘href’)).offset().top-50
нужно поиграть с top