X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-30
  • 3093 переглядів

  • Дизайн та розробка сайту

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

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

Кнопки прокрутки страницы вверх и вниз 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>

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

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 9, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078