Javascript to top button

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

Процесс создания кнопки вверх начнём с 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; } }

Источник

Создаем кнопку наверх

Кнопка наверх появляется при прокрутке вниз, когда мы попадет опускаемся ниже одного экрана браузера (100vh). При нажатии на кнопку нас плавно поднимает наверх (скорость можно регулировать). Для демонстрации работы кнопки я создал одностаничник (вы можете скачать его по ссылке).

Вставляем кнопку в разметку

В файле index.html в самый конец разметки вставляем наш элемент кнопки:

▲ — это Unicode-символ треугольника. Вы можете использовать любой символ, либо вставить внутри div’а нужное вам изображение стрелки

Стилизация кнопки наверх

Комментарии даны прямо в CSS:

.go-top < position: fixed; /* фиксированное позиционирование */ left: 20px; /* отступ слева 20px */ top: 50%; /* выравниваем по центру */ transform: translateY(-50%); /* выравниваем по центру */ cursor: pointer; /* при наведении меняем курсор */ display: none; /* по умолчанию скрываем кнопку */ font-size: 20px; color: rgba(0, 51, 153, 0.5); border: 1px solid rgba(0, 51, 153, 0.5); background-color: rgba(0, 51, 153, 0.1); padding: 15px 10px; >/* меняем прозрачность при наведении мышкой */ .go-top:hover < color: rgba(0, 51, 153, 0.8); border: 1px solid rgba(0, 51, 153, 0.8); background-color: rgba(0, 51, 153, 0.15); >/* модификатор для отображения кнопки */ .go-top--show

Скрипт для кнопки наверх

Скрипт довольно простой. Комментарии также даны в коде:

// считываем кнопку const goTopBtn = document.querySelector(".go-top"); // обработчик на скролл окна window.addEventListener("scroll", trackScroll); // обработчик на нажатии goTopBtn.addEventListener("click", goTop); function trackScroll() < // вычисляем положение от верхушки страницы const scrolled = window.pageYOffset; // считаем высоту окна браузера const coords = document.documentElement.clientHeight; // если вышли за пределы первого окна if (scrolled >coords) < // кнопка появляется goTopBtn.classList.add("go-top--show"); >else < // иначе исчезает goTopBtn.classList.remove("go-top--show"); >> function goTop() < // пока не вернулись в начало страницы if (window.pageYOffset >0) < // скроллим наверх window.scrollBy(0, -75); // второй аргумент - скорость setTimeout(goTop, 0); // входим в рекурсию >>

-75 — это скорость прокрутки. Чем меньше значение — тем выше скорость. Например при -100 будет возвращаться почти мгновенно.

Источник

How TO — Scroll Back To Top Button

Learn how to create a «scroll back to top» button with CSS.

How To Create a Scroll To Top Button

Step 1) Add HTML:

Create a button that will take the user to the top of the page when clicked on:

Example

Step 2) Add CSS:

Example

#myBtn <
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
>

#myBtn:hover background-color: #555; /* Add a dark-grey background on hover */
>

Step 3) Add JavaScript:

Example

// Get the button:
let mybutton = document.getElementById(«myBtn»);

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() ;

function scrollFunction() if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) mybutton.style.display = «block»;
> else mybutton.style.display = «none»;
>
>

// When the user clicks on the button, scroll to the top of the document
function topFunction() document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
>

Источник