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

Представляю Вашему внимание прекрасный вариант скрипта для плавного перемещения по якорным ссылкам.

✪ DEMO

HTML

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним – #

Якорем будет блок с ID – #yak1.
Далее просто прописываем нужный элемент с нужным айди.

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

Чтобы сделать переход по ссылкам плавным как в примере, ссылки нужно организовать в блок div с указанием ID.
В приведеном примере ниже – это блок div с ID prime_nav:

jQuery

В шапку перед закрывающимся head или в подвал перед закрывающимся body нужно подключить библиотеку jQuery.

Убедитесь в том, что это уже не сделано ранее, чтобы не спровоцировать конфликт и неработоспособность скриптов.

Далее после библиотеки нужно вставить сам скрипт, который и будет осуществлять анимацию плавного перехода.

– в пятой строке нужно указать ID блока ссылок. В примере это #prime_nav;
– в шестнадцатой строке – время задержки в миллисекундах – 1500, что равно 1,5 секунды.

Чтобы сама страница смотрела красиво, Вы можете добавить любые стили.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

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

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