Плавная прокрутка к якорю или на странице лендинга по пунктам меню

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

Наверняка вы видели подобный эффект на других лендингах. Сегодня вы узнаете, как его реализовать.

Плавная прокрутка к якорю при помощи 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, который мы использовали при создании анимации в этой статье. Некоторые анимации не проигрываются и на их месте остается пустое место. Если кто знает, как это исправить, напишите пожалуйста в комментариях или в вк. Спасибо

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

Актуальные статьи

Страница 404 в MODX Revo

Для правильной индексации содержимого сайта поисковыми системами крайне важно создать страницу ошибки 404 . Создаем ее в следующей очередности: Сначала нужно создать новый ресурс Назовем созданный документ «Страница 404» В поле содержимое ресурса вводим текст: «Ошибка 404. Данная страница отсутствует на нашем сайте Вы можете перейти на главную страницу или воспользоваться картой сайта.» Переходим в […]

Подробнее

Как запретить пользователям входить в админку ВП?

Если по каким-то причинам вы не хотите, чтобы пользователи сайта могли входить в админку (любые ссылки в wp-admin), то сделать это очень просто. Достаточно лишь добавить в файл functions.php вашей темы следующий код: //запрет доступа к админке start function wph_noadmin() { if (is_admin() && !current_user_can(‘administrator’)) { wp_redirect(home_url()); exit; } } add_action(‘init’, ‘wph_noadmin’); //запрет доступа к […]

Подробнее

Звоните:

8-903-835-04-47

Анализ сайта онлайн

Рестайлинг сайта

Если Ваш сайт устарел и не устраивает Вас - мы поможем освежить или полностью переработать его.

Поиск по сайту

Поиск по сайту