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