Добрый день. Сегодня хочу рассказать вам про такой интересный эффект, как плавная прокрутка к якорю. Например, это может быть меню вверху страницы, при нажатии на которое произойдет плавная прокрутка к соответствующему элементу.
Наверняка вы видели подобный эффект на других лендингах. Сегодня вы узнаете, как его реализовать.
Плавная прокрутка к якорю при помощи javascript
В одном из проектов, как раз, и стала задача реализовать подобный эффект с плавной прокруткой до определенного элемента при клике по одному из элементов меню.
Начнем с того, что подключим библиотеку jquery к нашему проекту и пропишем путь к скрипту, который отвечает за плавность прокрутки:
|
1
2
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/perehod.js"></script> |
С этим справились. Теперь необходимо поставить метки и якоря, к которым будет происходить прокрутка.
Я расскажу на примере меню, которое было в проекте по аренде профессиональной техники для строительных и уборочных работ. Вот его исходный код:
|
1
2
3
4
5
6
7
|
<nav class="TopNavigation"> <ul> <li><a href="#top" class="scrollto">техника для клининга</a></li> <li><a href="#top1" class="scrollto">техника для строительства</a></li> <li><a href="#top2" class="scrollto">акции</a></li> </ul></nav> |
Как видите, все стандартно и без хитростей. На лендинге, в последствии, были сделаны блоки, соответствующие меню. В них раскрывалась конкретная услуга. К этим блокам и нужно было сделать плавный переход.
Для того, чтобы осуществлялся переход к нужному месту на сайте, достаточно добавить ссылку на идентификатор нужного блока. Давайте сделаем это.
|
1
2
3
4
5
6
7
|
<nav class="TopNavigation"> <ul> <li><a href="#top" class="scrollto">техника для клининга</a></li> <li><a href="#top1" class="scrollto">техника для строительства</a></li> <li><a href="#top2" class="scrollto">акции</a></li> </ul></nav> |
Теперь необходимо задать идентификаторы “top”, “top1” ”top2” соответствующим блокам. У меня это выглядело так:
|
1
|
<div id="top" class="contentFour" name="top"> |
Обратите внимание на атрибут name=»top». Он должен соответствовать идентификатору. Вот сам скрипт:
|
1
2
3
4
5
6
7
8
|
jQuery(document).ready(function() { jQuery("a.scrollto").click(function () { elementClick = jQuery(this).attr("href") destination = jQuery(elementClick).offset().top; jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100); return false; });}); |
Если вам, как и мне, нужно будет реализовать прокрутку к нескольким элементам, то просто ставьте идентификаторы, подобным образом и все! Очень удобный способ и простой в реализации.Я не утверждаю что он лучший, но он работает. Если кто-то сможет его упростить, сократить или как-то улучшить, буду вам очень признателен. Как по мне, так данный эффект может многим пригодиться.
Обратите внимание на то, что вначале статьи мы указали название и путь скрипта такой:
|
1
|
<script src="js/perehod.js"></script> |
То есть, вам необходимо создать папку в корне вашего сайта с названием js и в нее поместить файл с именем perehod.js. А уже в него вставить сам код скрипта. Это я так, на всякий случай. Вдруг кто-то не поймет.
А на сегодня- все. Теперь вы знаете, как реализовать такой классный эффект, как плавная прокрутка страницы к якорю. Всем пока!
P.s.: Спасибо тем, кто откликнулся на призыв в социальных сетях помочь с идеями для новых статей. Не знаю, почему вы решили писать в личные сообщения, оставляйте лучше в комментариях, так другим людям будет проще написать отзыв, если они будут видеть, что кто-то более смелый, уже сделал это.
У данного способа есть недостаток, он плохо работает с wow.js, который мы использовали при создании анимации в этой статье. Некоторые анимации не проигрываются и на их месте остается пустое место. Если кто знает, как это исправить, напишите пожалуйста в комментариях или в вк. Спасибо
Кстати, было много вопросов о том, как убрать якорь из адресной строки. Простой скрипт учитывающий эту просьбу