Плавный скролл страницы по якорным ссылкам
Статья
Задача простая, и выполнялась мной простым скриптом:
1 2 3 4 5 6 |
$('.smooth_scroll').on('click', function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000); }) |
Как можно из него понять, при нажатии на ссылку с классом smooth_scroll считывался атрибут href и происходила анимация скрола к блоку с id, который содержался в том самом атрибуте.
Также иногда было необходимо использовать немного доработанную версию:
1 2 3 4 5 6 |
$('.smooth_scroll').on('click', function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top - $('.navigation-fixed').outerHeight() }, 1000); }) |
Что же тут происходит? На самом деле все тоже самое, за исключением того что есть некое фиксированное меню, которое при неизмененном скрипте закрывало верхнюю часть блока к которому происходил скрол. Мы просто вычитаем высоту этого меню и теперь ничего не перекрывается.
Но недавно случилось так, что помимо скрола возникла необходимость не только скрола по странице, но и переход на другую страницу если она отличается от текущей. Вот пример такой ссылки /page_name#block_name.
То есть при клике на нее, допустим с главной страницы(index), перейдет на страницу page_name и сразу пролистает к блоку с id block_name. А при клике на эту ссылку со страницы page_name он просто плавно проскролит страницу к этому блоку.
Чтобы решить эту задачу, был использован плагин https://github.com/cferdinandi/smooth-scroll
Теперь код выглядит так:
1 |
var scroll = new SmoothScroll('.smooth_scroll'); |
Выполняет он тоже самое. Но решает ту задачу, которую не мог предыдущий скрипт, а именно переход по страницам.
Также чтобы был отступ от верхнего фиксированного блока как и у предыдущего варианта можно задать свойство header, и указать селектор в фиксированном блоке. Плагин в документации предлагает делать это дата атрибутом data-scroll-header, что мы и сделаем.
1 2 3 |
var scroll = new SmoothScroll('.smooth_scroll',{ header: '[data-scroll-header]', }); |
У плагина также много настроек, можете почитать на официальной странице. Меня же пока вполне устраивает и описанный мной функционал.
Возможно, в будущем я перепишу скрипт в более простой и удобночитаемый вид. Но пока буду пользоваться как есть.