Skip to main content

Кнопка наверх для сайта

Кнопка наверх для сайта

Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх.

Подключаем библиотеку jQuery

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

Код HTML

<div class="scroll-up"></div>

Код CSS

<style>
.scroll-up {
	position:fixed;
	bottom:25px;
	right:25px;
	display:none;
	width:40px;
	height:40px;
	background:url(../images/scroll-button.png);
}

.scroll-up:hover {
	cursor:pointer;
}
</style>

Код JavaScript

<script>
$(function(){      
	$(window).scroll(function(){
		if ($(this).scrollTop() > 400){
			$('.scroll-up').fadeIn();
		} else {
			$('.scroll-up').fadeOut();
		}
	});     

	$('.scroll-up').click(function(){
		$("html, body").animate({scrollTop: 0}, 700);
		return false;
	});
});
</script>
Похожие записи
Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия... Читать далее

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

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню... Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например... Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем... Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с... Читать далее

Всплывающее окно при закрытии страницы

Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя... Читать далее

Добавить комментарий

*

code