Як зробити кнопку «наверх» / to-top з плавним прокручуванням

Вітаю! У сьогоднішньому уроці розглянемо реалізацію простого коду кнопки «вгору» на HTML, jQuery та CSS.

Як завжди, починаємо з HTML-коду. Сьогодні він буде досить примітивним:

<div class="to-top" data-btn="toTop">
	&#10145;
</div>

де:
to-top — клас, за допомогою якого ми стилізуватимемо кнопку
data-btn="toTop" — дата-атрибут, за яким будемо відслідковувати події скролу та кліку по кнопці
(так, ми могли б це зробити і через клас, але тут вирішено використати data-атрибут)

Стилізація кнопки «вгору»

Щоб надати стилів кнопці, використаємо наступний код:

.to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: none;
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  line-height: 1.3;
  border: 3px solid #008cba;
  background-color: #00aae3;
  transform: rotate(-90deg);
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.3s;
}
.to-top:hover {
  opacity: 1;
}
.to-top--fixed {
  display: inline-block;
}

За замовчуванням ми приховуємо кнопку та фіксуємо її у правому нижньому куті:

  position: fixed;
  right: 25px;
  bottom: 25px;
  display: none;

У реальному проєкті, ймовірно, доведеться додати z-index, щоб перекрити інші елементи сайту.

Інші властивості, як-от:

  transform: rotate(-90deg);
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.3s;

надають кнопці лише візуальні ефекти.

При наведенні змінюємо прозорість:

.to-top:hover {
  opacity: 1;
}

А клас:

.to-top--fixed {
  display: inline-block;
}

використовується, щоб відобразити нашу кнопку.

JavaScript-код кнопки «вгору»

Для керування подіями кнопки використовується такий код:

jQuery(document).ready(function()
{
	jQuery(window).scroll(function()
	{
		var scroll_top = jQuery(window).scrollTop();
		
		if(scroll_top >= 300)
		{
			jQuery('[data-btn="toTop"]').addClass('to-top--fixed');
		}
		else
		{
			jQuery('[data-btn="toTop"]').removeClass('to-top--fixed');
		}
	});
	
	jQuery('[data-btn="toTop"]').on('click', function(e)
	{
		e.preventDefault();
		jQuery('html, body').animate({scrollTop: 0}, 300);
	});
});

Тут ми відстежуємо дві події:
1. Подію прокрутки вікна — scroll
2. Подію кліку по кнопці — click

Визначаємо, на якій висоті зараз знаходимося:

var scroll_top = jQuery(window).scrollTop();

Якщо висота прокрутки більше 300px — додаємо клас to-top--fixed:

jQuery('[data-btn="toTop"]').addClass('to-top--fixed');

Тобто додаємо стилізацію display: inline-block;

Інакше — видаляємо цей клас.

При кліку на кнопку (через data-атрибут):

jQuery('[data-btn="toTop"]').on('click', function(e)
{
	e.preventDefault();
	jQuery('html, body').animate({scrollTop: 0}, 300);
});

ми плавно прокручуємо сторінку догори:

jQuery('html, body').animate({scrollTop: 0}, 300);

Ось і все. Код прикладу можна переглянути на цій сторінці.