Кнопка наверх для сайта на JQuery
Уроки Кнопка наверх для сайта на JQuery
16 апреля 2015
1348
Кнопка наверх для сайта, JQuery

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

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Ресурсы, с большим количеством контента на страницах, в основном это могут блоги, журналы или СМИ, могут разместить у себя кнопку наверх для сайта. Данная кнопка, позволяет при скроллинге страницы и при нажатии на нее, подниматься по странице сайта наверх. Данный вариант, по моему мнению, очень удобен для быстрой навигации по сайту и позволяет оставаться эргономичным.

 

Ведь не нужно теперь пользоваться постоянно скроллом, достаточно нажать кнопку наверх и Вы окажетесь сразу вначале страницы. Конечно, не на всех сайтах нужно использовать данный скрипт, ведь не везде подойдет он под дизайн сайта или возможно, контента может оказаться не достаточно, тогда и смысл, данного скрипта, теряется полностью. По другому можно это назвать и scroll'ом, ведь по сути оно так и есть.

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

 

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

 

Первая часть. Подключаем файлы: css и js.

 

Вначале, давайте, сразу же подключим стили и js, которые нам пригодятся для дальнейшей работы скрипта. Немного стилей для формирования контента, файл top.js, который будет отвечать за работу кнопки наверх и JQuery библиотеку jquery-latest.min.js

 

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/top.js"></script>

 

 

Вторая часть. Файл index.php.

 

В данном файле, мы просто вставляем между блочным элементом div, любой текст, который нужен нам для скроллинга по странице вниз, тем самым слева появиться кнопка наверх.

 

<div id="content">
Любой текст... Введите достаточно текста, чтобы 
посмотреть эффект.
</div>

 

После данного контента, мы создаем тег a href="#", которому придадим класс button. Между открывающим и закрывающим тегом a, создадим тег span, в котором будем хранить символ из html, символизирующий кнопку наверх. 

 

<a href="#" class="button"><span>&#9650;</span></a>

 

 

Третья часть. Файл top.js.

 

Теперь займемся js-скриптом, который будет взаимодействовать с тегом a и классом button.

Сначала создаем функцию скроллинга и устанавливаем значение кнопке с классом button. Функция scrollTop - получает значение элемента при отступе сверху, допустим от шапки сайта. Функции fadeIn и fadeOut - устанавливают значение прозрачности и время появления элемента. Далее при клике на кнопку, создаем функцию, которая будет отвечать за анимацию и устанавливаем ей значение, равное 300. Ну и в итоге, получаем весь скрипт.

 

 

$(document).ready(function() {
$(window).scroll(function() {
	if ($(this).scrollTop() > 200) {
		$('.button').fadeIn(200);
		} else {
				$('.button').fadeOut(200);
		}
		});
		$('.button').click(function(event) {
		    event.preventDefault();		
		    $('html, body').animate({scrollTop: 0}, 300);
	})
});

 

 

Четвертая часть. Файл стилей demo.css.

 

Последнее, что осталось сделать, так это придать стили для кнопки. Сделаем ее по левому краю и на всю высоту, а также придадим ей цвет фона и цвет текста, как в обычном состоянии, так и при наведении.

 

.button {
	height: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
	text-decoration: none;
	color: #13202c;
	background: #f5f5f5;
	display: none;
}

.button:hover {
	background: #d2d2d2;
}

.button span{
	font-size: 30px;
	padding: 5px;
	color: #282450;
}

 

 

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





Роман КраутерИсточник материала »