Как сделать кнопку «наверх» / to-top с плавной прокруткой

Здравствуйте! В сегодняшнем уроке, рассмотрим реализацию простого кода кнопки «вверх» на Html, jquery и css.

Как и всегда, приступаем к рассмотрению HTML кода. Сегодня он будет довольно примитивный:

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

где:
to-top — класс, используя который мы будем стилизировать нашу кнопку
data-btn="toTop" — дата-атрибут, используя который мы будем отслеживать события скрола и клика по кнопке (да-да, мы можем это сделать и по классу «to-top», я же остановился на дата-атрибуте)

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

Для придания кнопке наверх стилей, будем использовать следующий код:

.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;».

В противном же случае, т. е. если экран выше отметки 300px, мы удаляем выше упомянутый класс.

А вот при клике по кнопке (отслеживается по дата-атрибуту «data-btn»):

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

мы плавно прокручиваем экран вверх:

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

На этом все. Код урока можно найти на этой странице.