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

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

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

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

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

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

Лечение сайта на Вордпресс от вирусов

Очень много сейчас вирусов и хакеров, которые ломают сайты, наполняют вредоносным кодом. Разберемся как вылечить сайт на ВП. 1. Бекапим базы данных. 2. Бекапим файлы сайта. 3. По желанию можно повесить загушку, что-то наподобие: «извините, обновляемся» Для этого достаточно в корень закинуть файлик index.html в котором будет написано <html><head></head> <body><center><h1>Извините, обновляемся.</h1></center> </body></html> 4. Далее требуется зайти в админку сайта. […]

Подробнее

Создаем форму обратной связи на HTML+PHP+JS

<?php $fio = $_POST[‘skw’]; $email = $_POST[‘telephone’]; $fio = htmlspecialchars($fio); $email = htmlspecialchars($email); $fio = urldecode($fio); $email = urldecode($email); $fio = trim($fio); $email = trim($email); //echo $fio; //echo «<br>»; //echo $email; if (mail(«soyus.S@yandex.ru», «Заявка с сайта», «Площадь:».$fio.». Телефон: «.$email ,»From: info@domen.ru \r\n»)) { echo «сообщение успешно отправлено»; } else { echo «при отправке сообщения возникли […]

Подробнее

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

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

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

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

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

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

×
Перезвоним и ответим на все вопросы!