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

Віталий

4 роки ago

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

Доброго времени суток

У меня на сайте уже есть статья о кнопке возврата к верху страницы. Мне пару раз задавали вопрос как сделать кнопку чтобы делала наоборот, при нажатии опускала к низу страницы. Не знаю. для чего может пригодится данная задумка, но если вы столкнулись с такой потребностью, то эта статья для вас. Кому интересно, можете посмотреть предыдущую статью - Кнопка возврата на верх страницы java и jquery

В этом уроке будем делать все на jQuery. Вам надо будет сделать три шага. Для начала добавить сами кнопки на страницы сайта. Добавлять можно куда угодно. Для удобства можете добавить в подвал сайта.

Это просто html код блока с двумя ссылками

<div class="scroll_panel">
	<a href="#" id="scroll_top"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></span></a>
	<a href="#" id="scroll_bottom"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></span></a>
</div>

Далее можете добавить стили. Они могут быть любыми, как вам удобно и вы хотите видеть на своем сайте. В моем примере кнопки плавают поверх сайта. Вы можете разместить кнопки по отдельности одну вверху и вторую внизу. Тогда вам не надо родительский блок, а просто используйте ссылки.

Вот готовые стили, как в примере:

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

 
.scroll_panel svg {
fill:#f00;
}

#scroll_top {
	display: block;
	width: 100%;
	height: 50%;	
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	transition: background 0.2s ease;
}
#scroll_top span {
	display: block;
	width: 100%;	
	position: absolute;
	left: 0;	
	top: 50px;
}
#scroll_top:hover {
	background: #ddd;  	
}

#scroll_bottom {
	display: block;
	width: 100%;
	height: 50%;	
	position: absolute;
	top: 50%;
	left: 0;
	text-align: center;
	transition: background 0.2s ease;
}

#scroll_bottom span {
	display: block;
	width: 100%;	
	position: absolute;
	left: 0;	
	bottom: 20px;
}
#scroll_bottom:hover {
	background: #ddd; 
}

Последнее что нужно сделать - добавить скрипт jQuery, который и будет переносить нас в начало или конец страницы.

<script>
$(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;
	});
});
</script>

Данный скрипт нужно добавлять только после библиотеки - jQuery. Она должна быть подключена у вас, если вы используете CMS, например WordPress. Если у вас самописный сайт, то вы должны были ее добавлять, если нет, то добавьте.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?

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

На этом все, спасибо за внимание. 🙂

Exit mobile version