Плавная прокрутка к якорю на сайте

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

Данное решение очень полезно использовать на так называемых Landing Page (посадочных страницах), которые состоят из одной длинной-длинной страницы. Итак. Ниже излагаю свой метод, хотя сделать это можно и несколькими способами, данная инструкция тоже работает.

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

Реализовывать нашу задачу мы будем с помощью библиотеки jQuerry. Подключим ее между тегами <head></head>

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

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

<div class="TopNavigation">
<ul>
<li><a href="#top1" class="scrollto">Пример</a></li>
<li><a href="#top2" class="scrollto">Пример</a></li>
<li><a href="#top3" class="scrollto">Пример</a></li>
<li><a href="#top4" class="scrollto">Пример</a></li>
</ul>
</div>

Как видно из данного меню, ничего сложного я не сделал до сих пор. Простое обычное меню, с ссылками на якоря по странице. Мой код с якорем также выглядит стандартно. Обращаем внимание на атрибут name.

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

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

jQuery(document).ready(function() { //наш код подзагружается тогда, когда вся страница будет загружена браузером
  jQuery("a.scrollto").click(function () { //получаем доступ к элементу a с классом scrollto и при клике по данному элементу срабатывает наша функция.
    elementClick = jQuery(this).attr("href") // получаем якорь нашего элемента, по которому мы кликнули и присваиваем его нашей новой переменной elementClick, в данном случае там хранится top.
    destination = jQuery(elementClick).offset().top; //определяем расстояние между нашим элементом name="top" и верхом сайта.
    jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 1100); //теперь собственно плавно движемся до этого элемента. Цифра 1100 - это время за которое мы достигнем нужного нас элемента.
    return false; //прерываем функцию
      });
});

Собственно все, пользуйтесь, по всем вопросам пишите комментарии. Спасибо.

Метки: JavaScript

Туристы

Один и многие

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.

Последнее в блоге

Плавная прокрутка к якорю на сайте

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

Рубрики

Свяжитесь с нами уже сейчас