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

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

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

Где:

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

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

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

<a href="#" id="scroll_bottom">↓ Вниз</a>
HTML
$(function(){
	$('#scroll_bottom').click(function(){
		$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 600);
		return false;
	});
});
JS

Пример

2

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

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

<a href="#" id="scroll_top">↑ Наверх</a>
HTML
$(function(){
	$('#scroll_top').click(function(){
		$('html, body').animate({scrollTop: 0}, 600);
		return false;
	});
});
JS

Пример

3

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

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

<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;
	});
});
JS

Пример

4

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

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

<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;
	});
});
JS

Пример

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

<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;
	});
});
JS
13.06.2019, обновлено 13.08.2019 466
Предыдущая запись Textarea для ввода SMS
Следующая запись Диалоговые окна JS

Поделится

Темы

CSS HTML jQuery JS

Другие публикации

Начиная с версии 64 Chrome начал добавлять разрывы в подчеркивании у ссылок, связано это с введением нового CSS...
Сделать так, чтобы редактор растягивался на всю высоту контента можно с помощью плагина Auto Grow для CKEditor 4,...
HTML ссылки для открытия чата и других функций популярных мессенджеров.
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
Сборник горизонтальных линий с тегом hr разных видов и стилей.