Блог старого компьютера

Блог старого компьютера


Главная Jquery Прокрутка страницы вверх jquery

Прокрутка страницы вверх jquery

20.01.2013 13:54 Администратор Jquery
Печать PDF

Не раз мы видели кнопку прокрутки страницы вверх, она сейчас есть практически на всех сайтах (вконтакте, хабрахабр, итд). Данная кнопка безусловно полезна и удобна когда на странице размещено много текста и фотографий, и нужно ввернутся вверх страницы к примеру для того чтоб выбрать другой раздел. Раньше к примеру лет 6 назад ничего подобного на сайтах не было, хотя уже тогда была возможность реализовать данную кнопку которая бы прокручивала страницу вверх. Так что можно считать эту кнопку просто модой которой сейчас придерживаются все. Так же к примеру прокрутить страницу вверх за один клик можно и другим путем, воспользоваться кнопкой "Home" на клавиатуре, что еще раз доказывает что это мода, и такой модный аксессуар должен быть и на наших сайтах. Сегодня я вам покажу как сделать подобную кнопку для прокрутки на вашем сайте.

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

Для написания я использовал популярный и модный JS фреймворк jquery который облегчит нам разработку, да и даст некоторые эффекты. Ничего сложного в коде нету, функции которые в нем используются я и раньше использовал и публиковал в своем блоге. И так код:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#top').click(function() {
$('html, body').animate( {scrollTop: 0}, 'slow')
});

$(window).scroll(function() {
if ($(this).scrollTop() >= ($(window).height()/2)) {
$('#top').fadeIn();
}
else {
$('#top').fadeOut();
};
});
});
</script>
<style>
#top{
position:fixed;
bottom:20px;
right:20px;
display:none;
}
p{
height:870px;
border:1px solid red;
}
</style>
</head>
<body>
<p class="b">1</p>
<p class="b">1</p>
<div id="top">/\</div>
</body>
</html>

 Для начала при написании кода я создал блок с id=top (он то и будет являтся нашим путем вверх) далее я стилизовал его и придал ему фиксированную позицию.

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

Далее я написал код который бы показывал нашу кнопку в зависимости от прокрутки страницы.

Вот собственно и все, каркас готов, кнопку вы можите оформить как пожелает вашей душе.

Прилагаю архив со скриптом для прокрутки страницы вверх.

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


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?