У меня на сайте уже была статья о якорях, ознакомится с ней можно по ссылке - Якоря и плавный переход по якорным ссылкам. В ней тоже организован плавный переход, но только для определенного, выделенного меню. Скрипт который мы рассмотрим в этой статье применит плавный переход по ссылкам для любых якорных ссылок на сайте, потому как он универсален. Работает для якорных ссылок типа все якоря (#) и на a[name]. Ну и можете посмотреть пример его работы:
Чаще всего применяется следующая структура якорей:
- Блоку к которому нужно прокрутить присваивается айди, например id="y1", ну или если у блока уже есть свой айди то его нужно скопировать и выполнить второй пункт.
- Вторым шагом, создается ссылка, где вместо пути указывается айди нужного блока с решеткой перед ним. Выглядит это примерно так:
<a href="#y1">Якорь 1</a>
Если сделать эти простые два шага, то при нажатии на ссылку, вас перекинет на нужный блок. Но перекинет моментально без плавной анимации, если же вы хотите это исправить, то вам и поможет следующий скрипт.
Работает он на основе jQuery, поэтому на сайте должна быть подключена библиотека jQuery. Убедитесь в этом, если таковой нет то добавьте ее. Можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Ну и собственно сам скрип, который тоже подключаете к сайту. любым удобным способом описаным в статье, что упоминалась чуть выше.
<script>
jQuery(function($){
$('a[href*="#"]').on('click.smoothscroll', function( e ){
var hash = this.hash, _hash = hash.replace(/#/,''), theHref = $(this).attr('href').replace(/#.*/, '');
if( theHref && location.href.replace(/#.*/,'') != theHref ) return;
var $target = _hash === '' ? $('body') : $( hash + ', a[name="'+ _hash +'"]').first();
if( ! $target.length ) return;
e.preventDefault();
$('html, body').stop().animate({ scrollTop: $target.offset().top - 0 }, 400, 'swing', function(){
window.location.hash = hash;
});
});
});
</script>
Особых настроек тут нет, так что можно просто добавить на сайт и все. Разве что, можно настраивать плавность прокрутки. В скрипте есть значение - 400. Это время прокрутки в миллисекундах. Можете сменить на большее число. для замедления или наоборот для ускорения анимации плавной прокрутки к якорю.
Лично мне, последний раз данный скрипт помог на одном из заказов помочь клиенту сделать плавными переходы по якорям, которые он создавал на протяжении нескольких лет в своих статьях. Надеюсь и вам поможет данный скрипт.
На этом все, спасибо за внимание. 🙂
