Уроки Кнопка наверх для сайта на JQuery
16 апреля 2015
1213
Кнопка наверх для сайта, 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;
}

 

 

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





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