Кнопка наверх с помощью CSS — «Нубекс»

Как добавить на сайт кнопку «наверх» для быстрого возврата к началу страницы

Сегодня мы рассмотрим, как добавить на сайт кнопку «наверх», которая позволит пользователям быстро вернуться к началу страницы без необходимости прокручивать весь контент. Это особенно полезно на длинных страницах и улучшает удобство использования сайта.

Шаг 1: Создание HTML-структуры для кнопки

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

Шаг 2: Добавление CSS стилей для кнопки

Теперь добавим некоторые стили для нашей кнопки, чтобы она выглядела привлекательно и была видна на странице. Вставьте следующий код в ваш файл CSS:

Эти стили устанавливают размеры, цвета, положение и видимость кнопки на странице.

Шаг 3: Добавление JavaScript кода для показа/скрытия кнопки и плавной прокрутки

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

document.addEventListener("DOMContentLoaded", function () < const backToTop = document.getElementById("back-to-top"); // Показать/скрыть кнопку при прокрутке страницы window.addEventListener("scroll", function () < if (window.pageYOffset > 300) < backToTop.style.display = "block"; >else < backToTop.style.display = "none"; >>); // Плавная прокрутка при клике на кнопку backToTop.addEventListener("click", function (event) < event.preventDefault(); window.scrollTo(< top: 0, behavior: "smooth" >); >); >);

Этот код добавляет обработчики событий для показа или скрытия кнопки и плавной прокрутки при клике на нее.

Заключение

Теперь у вас есть рабочая кнопка «наверх» на вашем сайте, которая поможет пользователям быстро вернуться к началу страницы. Это улучшит удобство использования сайта и сделает ваш проект более профессиональным. Не забудьте адаптировать стили и внешний вид кнопки в соответствии с дизайном вашего сайта. Удачи в разработке! 😉

Источник

Кнопка вверх для прокрутки страницы сайта в начало

Процесс создания кнопки вверх начнём с HTML-разметки:

В качестве изображения будем использовать SVG-изображение, которое установим с помощью CSS как background-image :

.btn-up { /* фиксированное позиционирование */ position: fixed; /* цвет фона */ background-color: #673ab7; /* расстояние от правого края окна браузера */ right: 20px; /* расстояние от нижнего края окна браузера */ bottom: 0; /* скругление верхнего левого угла */ border-top-left-radius: 8px; /* скругление верхнего правого угла */ border-top-right-radius: 8px; /* вид курсора */ cursor: pointer; /* отображение элемента как flex */ display: flex; /* выравниваем элементы внутри элемента по центру вдоль поперечной оси */ align-items: center; /* выравниваем элементы внутри элемента по центру вдоль главной оси */ justify-content: center; /* ширина элемента */ width: 60px; /* высота элемента */ height: 50px; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }

В этом коде мы элементу устанавливаем фиксированное позиционирование, то есть position: fixed . Для определение того, где должен располагаться элемент относительно краёв окна браузера, мы задаём следующие свойства: right: 20px и bottom: 0 .

Выравнивание псевдоэлемента ::before по центру внутри .btn-up выполним с помощью CSS Flexbox. Для этого .btn-up установим следующие свойства: display: flex , align-items: center и justify-content: center .

Шаг 2. Написание JavaScript кода

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

При нажатии на кнопку .btn-up будем прокручивать страницу к началу с анимацией.

Для выполнения этих действий нам необходимо написать JavaScript код. Выполним это на чистом JavaScript:

const btnUp = { el: document.querySelector('.btn-up'), show() { // удалим у кнопки класс btn-up_hide this.el.classList.remove('btn-up_hide'); }, hide() { // добавим к кнопке класс btn-up_hide this.el.classList.add('btn-up_hide'); }, addEventListener()  // при прокрутке содержимого страницы window.addEventListener('scroll', () => { // определяем величину прокрутки const scrollY = window.scrollY ); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { // переместим в начало страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();

Здесь мы оформили весь код в формате объекта. Для выбора необходимых элементов на странице мы использовали здесь метод querySelector , а для добавления обработчиков событий – свойство DOM-объекта onclick и метод addEventListener . В результате мы получили следующее:

Использование другого SVG-изображения

В примере, приведённом выше, мы использовали SVG-изображение. Вместо этого изображения можно использовать любое другое:

.btn-up { position: fixed; background-color: #673ab7; right: 20px; bottom: 20px; border-radius: 22px; cursor: pointer; width: 44px; height: 44px; } .btn-up::before { content: ""; text-align: center; position: absolute; width: 20px; height: 20px; left: 12px; top: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17V4M3 10l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E"); }

Кроме изменения SVG-изображения, мы также поменяли здесь некоторые другие стили:

Изменение цвета фона и других свойств кнопки

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

Пример квадратной кнопки, в которой в качестве цвета фона ( background-color ) используется #3aa111 :

Кнопка с плавным появлением и скрытием

Чтобы кнопка плавно появлялась и исчезала можно воспользоваться CSS-переходами.

Для этого в CSS необходимо внести следующие изменения:

.btn-up { position: fixed; /* фиксированная позиция */ background-color: #673ab7; /* цвет заднего фона */ right: 20px; /* расстояние от правого края */ bottom: 0px; /* расстояние от нижнего края */ border-top-left-radius: 8px; /* скругление верхнего левого угла */ border-top-right-radius: 8px; /* скругление верхнего правого угла */ cursor: pointer; /* форма курсора */ display: flex; /* не отображать элемент */ align-items: center; justify-content: center; transition: opacity 0.3s ease-in-out; width: 60px; height: 50px; opacity: 1; } .btn-up::before { content: ""; width: 40px; height: 40px; background: transparent no-repeat center center; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E"); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #512da8; /* цвет заднего фона при наведении */ } }

Также необходимо отредактировать JavaScript код, например, так:

const btnUp = { el: document.querySelector('.btn-up'), scrolling: false, show() { if (this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.remove('btn-up_hide'); this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.remove('btn-up_hiding'); }, 300); } }, hide() { if (!this.el.classList.contains('btn-up_hide') && !this.el.classList.contains('btn-up_hiding')) { this.el.classList.add('btn-up_hiding'); window.setTimeout(() => { this.el.classList.add('btn-up_hide'); this.el.classList.remove('btn-up_hiding'); }, 300); } }, addEventListener()  this.scrolling = false; // если пользователь прокрутил страницу более чем на 200px if (scrollY > 400) { // сделаем кнопку .btn-up видимой this.show(); } else { // иначе скроем кнопку .btn-up this.hide(); } }); // при нажатии на кнопку .btn-up document.querySelector('.btn-up').onclick = () => { this.scrolling = true; this.hide(); // переместиться в верхнюю часть страницы window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } } } btnUp.addEventListener();

Для добавления и удаления классов у элементов мы в этом коде использовали методы add и remove объекта classList . При этом часть этих действий выполняли не сразу, а спустя некоторое время, используя для этого метод setTimeout .

Выезжающая снизу кнопка вверх

В этом примере сделаем так, чтобы кнопка вверх появлялась снизу. Выполнять это будем с помощью CSS-свойств transform и transition . Кроме этого, SVG-изображение вставим с использованием тега :

.btn-up { position: fixed; background-color: #f57c00; left: 20px; bottom: 30px; border-radius: 25px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease-in-out, transform 0.3s ease-in-out; color: #fff; width: 50px; height: 50px; opacity: 1; transform: translateY(0); } .btn-up_hide { display: none; } .btn-up_hiding { opacity: 0; transform: translateY(100px); } .btn-up-icon { width: 40px; height: 40px; fill: currentcolor; } @media (hover: hover) and (pointer: fine) { .btn-up:hover { background-color: #ef6c00; } }

Источник

Как сделать кнопку наверх для сайта

На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку «Наверх». Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки «Вверх», посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).

Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.

Кнопка наверх: HTML+CSS

Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:

     .topNubex Вверх  

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

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

     #topNubex    
  

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

Смотрите также:

Источник