Плавная прокрутка к якорю на сайте - Творческая студия #Cruelten
Блог
Делимся с Вами своими знаниями и новостями
28.06.2015

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

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

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

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

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

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

 

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

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

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

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

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




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


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.