Блог
Делимся с Вами своими знаниями и новостями
28.06.2015

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

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

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

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

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

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

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

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

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

Метки:

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

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

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