Кнопки для прокрутки сторінки вгору і вниз 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>

Якщо ви не знаєте як і куди додавати бібліотеку і скрипт, ознайомтеся зі статтею- Як і де підключити скрипт?

Якщо все правильно зроблено, то результат буде як в прикладі. Думаю, цей урок можна вважати не складним і проблем у вас не виникло, якщо щось не так, запитуйте в коментарях або зв'язуйтеся зі мною.

На цьому все, дякую за увагу 🙂