Как сделать плавную прокрутку к якорю

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

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

Плавная прокрутка к якорю при помощи javascript

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

Начнем с того, что подключим библиотеку jquery к нашему проекту и пропишем путь к скрипту, который отвечает за плавность прокрутки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/perehod.js"></script>

С этим справились. Теперь необходимо поставить метки и якоря, к которым будет происходить прокрутка.

Я расскажу на примере меню, которое было в проекте по аренде профессиональной техники для строительных и уборочных работ. Вот его исходный код:

<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>

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

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

<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” соответствующим блокам. У меня это выглядело так:

.
.
<div id="top" class="contentFour" name="top">
.
.

Обратите внимание на атрибут name="top". Он должен соответствовать идентификатору. Вот сам скрипт:

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;
  });
});

Если вам, как и мне, нужно будет реализовать прокрутку к нескольким элементам, то просто ставьте идентификаторы, подобным образом и все! Очень удобный способ и простой в реализации.Я не утверждаю что он лучший, но он работает. Если кто-то сможет его упростить, сократить или как-то улучшить, буду вам очень признателен. Как по мне, так данный эффект может многим пригодиться.

Обратите внимание на то, что вначале статьи мы указали название и путь скрипта такой:

<script src="js/perehod.js"></script>

То есть, вам необходимо создать папку в корне вашего сайта с названием js и в нее поместить файл с именем perehod.js. А уже в него вставить сам код скрипта. Это я так, на всякий случай. Вдруг кто-то не поймет.

А на сегодня- все. Теперь вы знаете, как реализовать такой классный эффект, как плавная прокрутка страницы к якорю. Всем пока!

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

У данного способа есть недостаток, он плохо работает с wow.js, который мы использовали при создании анимации в этой статье. Некоторые анимации не проигрываются и на их месте остается пустое место. Если кто знает, как это исправить, напишите пожалуйста в комментариях или в вк. Спасибо

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 15

  1. IVAN

    БОРОДА ,А НЕ КОД=/

    • dimadv7

      Буду признателен за конструктивную критику и конкретные предложения по изменению данного кода 🙂

    • хрум хрум ху е

      А без всех этих не нужных никак? Я, например, бы хотел ссылку на якорь поместить в код со стилизированной кнопкой, поэтому борода выше не нужна

    • dimadv7

      Кого «этих не нужных никак»? Хочешь поместить — помещай, здесь речь идет о меню, выражайся конкретней, я тебя не понимаю

    • хрум хрум ху е

      да просто код в моем комментарии не отобразился, а вопросов у меня уже нет

  2. Mister Mike

    Все работает, спасибо) Полдня искал код скроллинга без лишней «воды» статье, отличный у тебя сайт, спасибо еще раз 🙂

  3. Михаил

    Спасибо огромное! Именно то, что искал! 🙂

  4. Сергей

    Огромное спасибо за нужную статью. Реально замучился найти нормальное решение. Огромное спасибо. Главное, что работает.

  5. Александр

    Сделал скрол всё как надо, долго искал

  6. Alipresent

    спасибо работает, но нету плавности как ее сделать? изменить 1100 на что то другое ?! =)

  7. Angry Birds Rio

    Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.

  8. Анна

    Статья очень помогла, спасибо большое. Только вначале тоже не получалось плавности получить, а оказывается Вы не упомянули, что во всех ссылках класс был именно class=»scrollto». Тогда все работает. Это видно из кода jQuery: jQuery(«a.scrollto»).

  9. Mir-On

    Спасибо! Всё действительно просто и работает!
    У нас была проблема, в меню были ссылки на якоря и внешние ссылки. Внешние ссылки не работали. Не правильно был сделан js. Поставили Ваш код — и всё суперски заработало! Спасибо громадное!

  10. Ян

    Спасибо! Как раз искал плавную прокрутку. Все работает. Еще бы сделали ссылку на демонстрационную версию и ссылку на скачать.

  11. YandexBrowser

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

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