Smartlanding

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

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

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

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

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

23 комментария

  • IVAN

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

    Ответить
  • dimadv7

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

    Ответить
  • Mister Mike

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

    Ответить
  • Михаил

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

    Ответить
  • хрум хрум ху е

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

    Ответить
  • dimadv7

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

    Ответить
  • хрум хрум ху е

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

    Ответить
  • Сергей

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

    Ответить
  • Александр

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

    Ответить
  • Alipresent

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

    Ответить
  • Angry Birds Rio

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

    Ответить
  • Анна

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

    Ответить
  • Mir-On

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

    Ответить
  • Ян

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

    Ответить
  • YandexBrowser

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

    Ответить
  • Евгений

    все гениальное просто,спасибо нужная «вещица»

    Ответить
  • Евгений

    вот только другой скрипт(увеличение картинок)перестал работать и как быть?

    Ответить
  • Егор

    Разобраться в чем проблема и исправить. Какой вопрос, такой — ответ. Большинство людей — не телепаты. И на основе такого количества входных данных не способны решить вашу проблему или подсказать что-то.

    Ответить
  • Грег

    А у меня че-то не показывает якоря? Все работает, плавная прокрутка, id=»top2" и name=»top2" поставил на секции, ссылки указал типа акции, а оно прокрутку делает до нужной секции, а в адресной строке все равно ничего не показывает. По идее должно же быть типа index.html#top2

    Ответить
  • Иван

    ПОЛНАЯ ФИГНЯ — СКРИПТ НЕРАБОЧИЙ !!!!!!!!!!!!!!!

    Ответить
  • Никита

    А если перейти по прямой странице?
    Например: __http://domain/url/#hash
    Вуаля, и не работает=) Это не правильно так делать

    Ответить
  • anonymous@gmail.com

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

    Ответить
  • dimadv7

    anonymous @gmail.com, отлично. Есть еще вариант, когда в адресной строке не появляется якорь. Мне кажется так получше https://smartlanding.biz/skript-plavnoj-prokrutki.html

    Ответить

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

Поделитесь статьей в социальных сетях, чтобы не потерять