С появлением удобной (на мой взгляд, на ваш может быть и нет) пагинции страниц с помощью скролинга (Scroll+Ajax), на многих сайтах, стало неудобно подниматься вверх (обратно к меню сайта), так как внедряя технологию некоторые программисты забывают о том, что меню сайта находится в шапке, и нет возможности быстро до него «достучаться». А ведь каждый знает, что одно из главных требований пользователей это удобство.
Расскажу как реализовать кнопку, при нажатии на которую пользователь поднимется вверх.
Для реализации надо создать пару файлов: ButtonUpScroll.js (JavaScript который будет выводить кнопку и обрабатывать действия пользователя), ButtonUpScroll.css (Стиль кнопки), ButtonUpScroll.png (Рисунок самой кнопки).
Из других технологий web разработки нам понадобиться JQuery.
У меня кнопка имеет такой вид (40х40 пикселей):
Сам HTML кнопки:
<div id="ButtonUpScroll" class="ButtonUpScroll" ishiden=0 style="display: none;"></div>
Код простой но есть пару особенностей:
- ishiden — Параметр отвечает скрыта (0) или показана (1) кнопка
- display: none — Вначале скрываем кнопку на странице
В файле ButtonUpScroll.css описываем стиль:
.ButtonUpScroll {
width: 40px; // Ширина кнопки
height: 40px; // Высота кнопки
background-image: url("/images/ButtonUpScroll.png"); // Путь к вашему рисунку с кнопкой
background-position: center center;
background-repeat: no-repeat;
position: fixed; // Фиксирум кнопку, что бы она прокручивалась вместе с текстом
top: 3px; // Положение - отступим сверху
left: 50%; // Положение - отступим слева
cursor: pointer; // Меняем курсор при наведении
z-index: 9999; // Что бы кнопка не перекрывалась другими элементами страницы
}
В файле ButtonUpScroll.js нам необходимо будет описать пару обработчиков на действие пользователя:
- Пользователь прокрутил страницу на определенную величину — показываем кнопку
- Пользователь нажал на кнопку — переносим его в начала страницы
Напишем функцию которая будет показывать кнопку, если пользователь опустился больше чем на 50 пикселей:
$(window).scroll(function () {
if ($(document).scrollTop()>50) {
//Появление кнопки
if ($('div[id="ButtonUpScroll"]').attr('ishiden')==0) {
$('div[id="ButtonUpScroll"]').attr('ishiden',1);
$('div[id="ButtonUpScroll"]').slideDown(500);
}
}else{
//Скрваем кнопку
$('div[id="ButtonUpScroll"]').attr('ishiden',0);
$('div[id="ButtonUpScroll"]').slideUp(300);
}
});
Тут можно применять разную анимацию показа и скрытия кнопки (У меня появление/скрытие описано через slideDown/slideUp).
Обработка события при нажатии на кнопку:
$('div[id="ButtonUpScroll"]').live('click',function(){
var v=5000; //скорость прокрутки стрницы вверх пиксель/сек
var h=$(document).scrollTop()+screen.height;
var t=h/v*1000; // Время за которое должна страница подняться вверх
$('body,html').animate({
scrollTop: 0
}, t);
return false;
});
В итоге получился файл ButtonUpScroll.js:
$(document).ready(function(){
$(window).scroll(function () {
if ($(document).scrollTop()>50) {
if ($('div[id="ButtonUpScroll"]').attr('ishiden')==0) {
$('div[id="ButtonUpScroll"]').attr('ishiden',1);
$('div[id="ButtonUpScroll"]').slideDown(500);
}
}else{
$('div[id="ButtonUpScroll"]').attr('ishiden',0);
$('div[id="ButtonUpScroll"]').slideUp(300);
}
});
$('div[id="ButtonUpScroll"]').live('click',function(){
var v=5000;
var h=$(document).scrollTop()+screen.height;
var t=h/v*1000;
$('body,html').animate({
scrollTop: 0
}, t);
return false;
});
});
Осталось только подключить файлы к страничке:
<head>
<script src="/js/ButtonUpScroll.js" language="javascript" type="text/javascript">
<link href="/css/ButtonUpScroll.css" type="text/css" rel="stylesheet">
</head>
Вот и все, приятного «аппетита». Спасибо за внимание.
Автор: nbutikov
