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

13.06.2019

35173

Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция animate.

.animate(properties, duration, easing, complete);

Где:

properties – свойства, к которым будет применятся анимация;
duration – время анимации, мс;
easing – метод анимации, по умолчанию swing замедление в начале и конце или linear постоянная скорость;
complete – функция, вызываемая после завершения анимации.

Кнопка «Вниз»

Стационарная ссылка или кнопка для прокрутки страницы в самый низ.

<a href="#" id="scroll_bottom">↓ Вниз</a>

HTML

$(function(){
	$('#scroll_bottom').click(function(){
		$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
		return false;
	});
});

Пример

Кнопка «Наверх»

Также ссылка или кнопка для прокрутки в начало страницы.

<a href="#" id="scroll_top">↑ Наверх</a>

HTML

$(function(){
	$('#scroll_top').click(function(){
		$('html, body').animate({scrollTop: 0}, 600);
		return false;
	});
});

Пример

Плавающая кнопка

Кнопка появляется в нижнем правом углу и становится фиксированной при прокрутке страницы.

<a href="#" id="scroll_top" title="Наверх"></a>

HTML

#scroll_top {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 1000;
	width: 32px;
	height: 32px;
	background: url(https://snipp.ru/img/scroll_top.png) 50% 50% no-repeat;
	border-radius: 50%;
	opacity: 0.5;
}
#scroll_top:hover {
 	opacity: 1;
}

CSS

$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop() > 100) {
			$('#scroll_top').show();
		} else {
			$('#scroll_top').hide();
		}
	});
 
	$('#scroll_top').click(function(){
		$('html, body').animate({scrollTop: 0}, 600);
		return false;
	});
});

Пример

Панель справа

Фиксированная панель, постоянно находится справой стороны окна браузера. При малой ширине окна она скрывается чтобы не наползать на контент.

<a href="#" id="scroll_top"><span>↑ Наверх</span></a>

HTML

.scroll_panel:hover {
	background: #eee; 
}

/* Наверх */
#scroll_top {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 90px;
	transition: background 0.2s ease;  
	display: block;
	height: 100%;	
	text-align: center;
 	opacity: 0.5;
}
#scroll_top span {
	display: block;
	width: 100%;	
	position: absolute;
	left: 0;	
	top: 20px;
}
#scroll_top:hover {
	background: #ddd;  	
	opacity: 1;
}

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) {
	.scroll_panel {
		display: none;
	}
}

CSS

$(function(){
	$(window).scroll(function(){
		if($(window).scrollTop() > 100) {
			$('#scroll_top').show();
		} else {
			$('#scroll_top').hide();
		}
	});
 
	$('#scroll_top').click(function(){
		$('html, body').animate({scrollTop: 0}, 600);
		return false;
	});
});

Пример

Дополненный вариант с кнопкой «Вниз»

<div class="scroll_panel">
	<a href="#" id="scroll_top"><span>↑ Наверх</span></a>
	<a href="#" id="scroll_bottom"><span>↓ Вниз</span></a>
</div>

HTML

.scroll_panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 90px;
	transition: background 0.2s ease;
}
.scroll_panel:hover {
	background: #eee; 
}

/* Наверх */
#scroll_top {
	display: block;
	width: 100%;
	height: 50%;	
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
 	opacity: 0.5;
	transition: background 0.2s ease;
}
#scroll_top span {
	display: block;
	width: 100%;	
	position: absolute;
	left: 0;	
	top: 20px;
}
#scroll_top:hover {
	background: #ddd;  	
	opacity: 1;
}

/* Вниз */
#scroll_bottom {
	display: block;
	width: 100%;
	height: 50%;	
	position: absolute;
	top: 50%;
	left: 0;
	text-align: center;
 	opacity: 0.5;
	transition: background 0.2s ease;
}
#scroll_bottom span {
	display: block;
	width: 100%;	
	position: absolute;
	left: 0;	
	bottom: 20px;
}
#scroll_bottom:hover {
	background: #ddd; 
 	opacity: 1;
}

/* Скрытие панели при маленькой ширине окна */
@media screen and (max-width: 700px) {
	.scroll_panel {
		display: none;
	}
}

CSS

$(function(){
	$('#scroll_top').click(function(){
		$('html, body').animate({scrollTop: 0}, 600);
		return false;
	});
	
	$('#scroll_bottom').click(function(){
		$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
		return false;
	});
});