Плавная прокрутка страницы до нужного элемента

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

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

Для начала предложу пример лендинга (или другой длинной страницы)

Заметили сходство между атрибутами href ссылок в главном меню и атрибутов id у секций?

Обязательно подключите библиотеку jquery. Рекомендую подключать скрипты перед закрывающим тегом body, в конце DOM. Ну, теперь сам скрипт:

Скрипт берет содержимое атрибута href у ссылки и с помощью метода animate плавно скроллит страничку до данного элемента. Параметр скорости можно менять, конечно. Сейчас это 0.5 секунды (циферка 500, нашли?).

Пример работы скрипта можно посмотреть тут (буллеты, прижатые к правой границе экрана). Лендинги для SONY — тоже моя работа, но там, на мой взгляд, ничего особенного, кроме бренда… Это же SONY! =)

Пользуйтесь!

Добавить комментарий для Аноним Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *