Главная
Web-дизайн
Плавный переход по всем якорным ссылкам, якорям на сайте

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

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

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

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

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 4, в среднем: 5 из 5

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

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

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко