Кнопка прокрутки страницы вверх

23.12.2017

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

Для работы этого скрипта необходимо подключение jQuery

JS

$(() => {
 
	$(window).on('scroll', function() {
	 
		if($(this).scrollTop() > 100) {
			$('#toTop').fadeIn();
		} else {
			$('#toTop').fadeOut();
		}
	 
	});
	 
	$('#toTop').on('click', function() {
	 
		$('body,html').animate({scrollTop:0},800);
	 
	});
 
});

HTML

<div id="toTop">^</div>

CSS

#toTop{
	position: fixed;
	width: 50px;
	height: 50px;
	right: 0;
	bottom: 50px;
	background: #003382;
	text-align: center;
	color: #fff;
	line-height: 50px;
	cursor: pointer;
	z-index: 2;
	display: none;
}

Leave a Reply

*

code