9 Вересень 2015
12 479
Рубрика: уроки

Как создать плавную прокрутку к части страницы

Ранее вы узнали, как создать кнопку “вверх”, а сейчас речь пойдет о “якорных” ссылках и о том, как создать плавную прокрутку на странице.

Якорная ссылка (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;
});

Посмотреть и скачать

Как видите, урок очень простой. Смотрите скрипт в действии и скачивайте материалы урока чтобы разбираться дальше. Успехов.

Тепер я хочу бачити коментарі 4