• Плавный скролл после нажатия на якорную ссылку

    Блог

    Персональный блог

Плавный скролл после нажатия на якорную ссылку

Плавный скролл после нажатия на якорную ссылку

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

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

1. Структура меню с якорными ссылками

Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id=”main”>…</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href=”#main”></a>
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

Каждая ссылка ссылается на соответствующий блок:

2. Скрипт плавного перехода к нужному блоку

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

 

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

DEMO

Источник

gnatkovsky.com.ua

webcomplex.com.ua

Свяжитесь со мной

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

[contact-form-7 404 "Not Found"]