Плавный скролл на jQuery

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

Демо на codepen

Разметка

Создаем 4 кнопки и 4 секции.

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>

<div>Секция 1</div>
<div>Секция 2</div>
<div>Секция 3</div>
<div>Секция 4</div>

Стили

Создадим внутренние отступы — padding и установим серый фон для каждой второй секции для визуального разделения.

.section {padding: 70px 0;}
.section:nth-child(2n) {background-color: #eee;}

Что получилось

Интерактив

В jQuery создаем событие клика на кнопку, предварительно проставив классы с префиксом js-. Это делается, чтобы в случае замены классов оформления, код поведения остался цел.

<!-- Установили классы для js  -->
<button class="js-scroll-trigger">1</button>
<button class="js-scroll-trigger">2</button>
<button class="js-scroll-trigger">3</button>
<button class="js-scroll-trigger">4</button>

// Написали обработчик клика
$('.js-scroll-trigger').click(function() {
  // code
});

Сейчас нам нужно понять, к какому именно элементу нужно скроллить. Я буду хранить это в data-атрибуте. Это такой атрибут, который вы можете назвать, как душе угодно:

• data-vasya
• data-lays
• data-id

И хранить там информацию. Я буду хранить там селектор элемента, к которому будем скроллить.

<!-- Проставили кнопкам селекторы элементов -->
<button class="js-scroll-trigger" data-scroll="#section-1">1</button>
<button class="js-scroll-trigger" data-scroll="#section-2">2</button>
<button class="js-scroll-trigger" data-scroll="#section-3">3</button>
<button class="js-scroll-trigger" data-scroll="#section-4">4</button>

<!-- Проставили секциям id -->
<section id="section-1">Секция 1</section>
<section id="section-2">Секция 2</section>
<section id="section-3">Секция 3</section>
<section id="section-4">Секция 4</section>

Тепер в javascript при клике на кнопку мы будем получать этот атрибут.

var scrollName = $(this).attr('data-scroll');

Что дальше? Нужно найти элемент с таким селектором в dom-дереве. Это можно сделать так:

var scrollName = $(this).attr('data-scroll'),
    scrollElem = $(scrollName);

И последний шаг — узнать расстояние от верха страницы до нашего элемента. В этом нам поможет метод offset () и его свойство top

var scrollName = $(this).attr('data-scroll'),
    scrollElem = $(scrollName),
    scrollTop = scrollElem.offset().top;

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

Мы будем анимировать параметр scrollTop. Вы можете спросить, почему мы указали html и body в качестве элементов для анимации?

Причина, по которой вы должны использовать оба селектора, заключается в несовместимости веб-браузера.

1. Браузеры Firefox и IE используют ‘html’
2. Браузеры в «классе webkit» например: Safari, Chrome используют ‘body’.

var scrollName = $(this).attr('data-scroll'),
    scrollElem = $(scrollName),
    scrollTop = scrollElem.offset().top;

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

В итоге скролл идет 500 мс. Проверим?

Javascript код

$('.js-scroll-trigger').click(function() {
   var scrollName = $(this).attr('data-scroll'),
       scrollElem = $(scrollName),
       scrollTop = scrollElem.offset().top;
   
   $('html, body').animate({
      scrollTop: scrollTop
   }, 500);
});