Плавный скролл страницы по якорным ссылкам

Статья

Задача простая, и выполнялась мной простым скриптом:

Как можно из него понять, при нажатии на ссылку с классом smooth_scroll считывался атрибут href и происходила анимация скрола к блоку с id, который содержался в том самом атрибуте.

Также иногда было необходимо использовать немного доработанную версию:

Что же тут происходит? На самом деле все тоже самое, за исключением того что есть некое фиксированное меню, которое при неизмененном скрипте закрывало верхнюю часть блока к которому происходил скрол. Мы просто вычитаем высоту этого меню и теперь ничего не перекрывается.

Но недавно случилось так, что помимо скрола возникла необходимость не только скрола по странице, но и переход на другую страницу если она отличается от текущей. Вот пример такой ссылки /page_name#block_name.
То есть при клике на нее, допустим с главной страницы(index), перейдет на страницу page_name и сразу пролистает к блоку с id block_name. А при клике на эту ссылку со страницы page_name он просто плавно проскролит страницу к этому блоку.

Чтобы решить эту задачу, был использован плагин https://github.com/cferdinandi/smooth-scroll

Теперь код выглядит так:

Выполняет он тоже самое. Но решает ту задачу, которую не мог предыдущий скрипт, а именно переход по страницам.

Также чтобы был отступ от верхнего фиксированного блока как и у предыдущего варианта можно задать свойство header, и указать селектор в фиксированном блоке. Плагин в документации предлагает делать это дата атрибутом data-scroll-header, что мы и сделаем.

У плагина также много настроек, можете почитать на официальной странице. Меня же пока вполне устраивает и описанный мной функционал.

Возможно, в будущем я перепишу скрипт в более простой и удобночитаемый вид. Но пока буду пользоваться как есть.

Оставить заявку