X
  • Дизайн и разработка сайта
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2022-07-03
  • 8828 переглядів

    4 коментар

  • Дизайн и разработка сайта

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

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

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

У меня на сайте уже была статья о якорях, ознакомится с ней можно по ссылке - Якоря и плавный переход по якорным ссылкам. В ней тоже организован плавный переход, но только для определенного, выделенного меню. Скрипт который мы рассмотрим в этой статье применит плавный переход по ссылкам для любых якорных ссылок на сайте, потому как он универсален. Работает для якорных ссылок типа все якоря (#) и на a[name]. Ну и можете посмотреть пример его работы:



Пример

Чаще всего применяется следующая структура якорей:

  1. Блоку к которому нужно прокрутить присваивается айди, например id="y1", ну или если у блока уже есть свой айди то его нужно скопировать и выполнить второй пункт.
  2. Вторым шагом, создается ссылка, где вместо пути указывается айди нужного блока с решеткой перед ним. Выглядит это примерно так:
    <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. Это время прокрутки в миллисекундах. Можете сменить на большее число. для замедления или наоборот для ускорения анимации плавной прокрутки к якорю.

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 14, в среднем: 4.4 из 5
Читайте також
Опубликовано 4 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Натисніть, щоб додати код в коментар. Далі додайте свій код всередину тегів <code> тут код </code>
Я ознайомлений(а) з політикою конфіденційності і даю згоду на обробку персональних даних*

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.