Как добавить кнопку «наверх» на своем веб-сайте

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

Для изображения значка на кнопке используем Font Awesome. Если вы работаете с Bootstrap, то можно применить глификонки.
Мы будем использовать фиксированную позицию или липкую кнопку, которая скрыта или видима в зависимости от того, где находится пользователь на странице. Три элемента работают вместе, чтобы создать кнопку:

  • HTML для разметки
  • jQuery для создания поведения кнопки
  • CSS, чтобы придать ему стиль и индивидуальность

Добавьте jQuery на свой сайт
Во-первых, проверьте, используете ли вы jQuery на своем сайте, просмотрев исходный код вашей страницы. Если вы используете Chrome, просто перейдите в меню «Просмотр»> «Разработчик»> «Просмотр источника» . Сделайте поиск и введите «jquery». Если он уже существует, вам явно не нужно беспокоиться о добавлении jQuery. Если jQuery не был добавлен, добавьте этот код непосредственно перед тегом страницы:

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

Добавить HTML
Итак, где мы должны поместить этот код? Эта кнопка имеет фиксированное положение, поэтому на самом деле нет строгих правил. Я лично хотел бы поместить его после нижнего колонтитула, чтобы он был после содержимого всей страницы. Просто не забудьте сохранить его втеге.

Если вы хотите включить значок со стрелкой вверх, используйте этот fa-класс:

В fa-классе указывается значок Font Awesome, в нашем случае стрелка вверх. С другой стороны, вы можете использовать текст вместо значка:

Добавим стиль CSS

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

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

Читайте также:  Плавная прокрутка до якоря

Обратите внимание, что наличие значения z-индекса при 100 очень важно, чтобы избежать совпадения с любыми другими элементами. Наш стиль имеет определенный размер шрифта, который довольно большой, поэтому наша кнопка не только видима, но и достаточно велика, чтобы пользователь мог нажать на сенсорном экране.

Делаем jQuery
Здесь происходит вся магия.

Если у вас есть отдельный файл, в котором вы храните все jQuery / JavaScript, вы можете вставить этот скрипт там. Но для пробных целей вы можете вставить это прямо после вызова jQuery (вы можете вставить его прямо перед закрывающим тегом).

Давайте раскроем это, чтобы мы лучше поняли, что здесь происходит.

У нас есть две переменные, смещение и продолжительность. Смещение описывает, когда появится кнопка: когда пользователь прокручивается до отметки 250 пикселей. Продолжительность 300, что означает, что она появится в 300 миллисекунд.

Функция прокрутки позволяет кнопке быть видимой. Функция scrollTop – это то, что мы использовали для текущей позиции прокрутки. Все, что за 250 покажет кнопку с функцией fadeIn. Когда это положение больше смещения, появляется кнопка.

Функция fadeIn – это то, что заставляет кнопку отображаться, а продолжительность – это скорость, с которой она появляется. Когда смещение меньше 250, кнопка не отображается. Она не будет видна до тех пор, пока пользователь не прокрутится до этой позиции, и если они прокрутят выше этой позиции, кнопка исчезнет. Это очевидно в функции fadeOut. Функция анимации – это то, что позволяет нам прокручивать вверх.

Кнопка «back-to-top» – это простой элемент для реализации на вашем сайте, а также очень выгодный для ваших пользователей. Так что двигаемся дальше!


Поделится:

Оставьте комментарий

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