Итак, сегодня мы научимся делать плавный скролл на jQuery.
Разметка
Создаем 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 в качестве элементов для анимации?
Причина, по которой вы должны использовать оба селектора, заключается в несовместимости веб-браузера.
- Браузеры Firefox и IE используют ‘html’
- Браузеры в «классе 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);
});