Кнопка прокрутка вверх: 5 разных вариантов и стилей

Трудно представить современный сайт без кнопки «Вверх». Всегда необходимо предоставлять пользователю «прыгнуть» к началу страницы. Пять неплохих примеров у нас в посте.

Все приведенные варианты будут использовать библиотеку jQuery, поскольку она с легкостью предоставляет свой UI функционал в этом направлении. Мы рассмотрим разные стили кнопок, эффекты прокрутки, а также параллельно предложим боковую и горизонтальную навигацию по странице. Поехали!

1. Начнем с самого простого примера, где нет замысловатых скриптов и оформления:

Pen

Из всего кода Вам потребуется следующий HTML-тег. Измените его под себя при необходимости.

Наш JavaScript будет относительно похож на все остальные

Код CSS для кнопки

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

2. Еще один пример с простым использование, но уже с другим оформлением кнопки:

See the Pen

Из HTML структуры Вам понадобиться эта строка

3. Дальше идет пример поинтереснее. В нем присутствует похожая кнопка «вверх», но уже слева можно наблюдать вертикальную навигацию по определенным разделам:

See the Pen

Данный пример не является универсальным и имеет один минус – при создании новых секций\кнопок Вам необходимо отдельно прописывать это в скрипте. Подойдет для небольшой навигации по заранее известным разделам.

4. Следующая наработка более продвинута в плане навигации. Все та же кнопка «вверх» и уже горизонтальная навигация по странице.

See the Pen

Здесь Вам достаточно отметить раздел определенным идентификатором, например, id=»sec01″ и повесить ссылку типа href=»#sec01″. Теперь при нажатии на нее скрипт будет крутить страницу до нужного раздела. Кстати, здесь присутствует еще и прогресс-бар, отмечающий пункт меню «активным».

5. Ну и напоследок мы оставили самый интересный вариант с кастомным эффектом прокрутки.

See the Pen

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

На этом все! Если Вам нужна простая и без лишних скриптов кнопка прокрутка вверх, то воспользуйтесь первым вариантом. Экспериментируйте!

215 просмотров
В поисках шаблона для сайта?