Плавный переход по всем якорным ссылкам, якорям на сайте

Віталий

6 років ago

Плавный переход по всем якорным ссылкам, якорям на сайте

Доброго времени суток. 🙂

Попался мне старенький скрипт, давно хотел о нем написать статью, да все забывал про него, но недавно он вновь мне понадобился и сильно выручил. Если вы используете на своем сайте в статьях якоря, то бишь якорные ссылки, чтобы переходить к определенному месту в статье или на странице, то данный скрипт поможет сделать это плавно, если у вас были простые ссылки без анимации.

У меня на сайте уже была статья о якорях, ознакомится с ней можно по ссылке - Якоря и плавный переход по якорным ссылкам. В ней тоже организован плавный переход, но только для определенного, выделенного меню. Скрипт который мы рассмотрим в этой статье применит плавный переход по ссылкам для любых якорных ссылок на сайте, потому как он универсален. Работает для якорных ссылок типа все якоря (#) и на 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. Это время прокрутки в миллисекундах. Можете сменить на большее число. для замедления или наоборот для ускорения анимации плавной прокрутки к якорю.

Лично мне, последний раз данный скрипт помог на одном из заказов помочь клиенту сделать плавными переходы по якорям, которые он создавал на протяжении нескольких лет в своих статьях. Надеюсь и вам поможет данный скрипт.

На этом все, спасибо за внимание. 🙂

Exit mobile version