Кнопка "Наверх" для сайта
Такая удобная и очень нужная кнопочка. Как же ее добавить на свой сайт? Легко и просто. Немного JQuery, HTML и конечно же CSS.
Итак, начнем.
Как это обыно делается, опредлимся чего именно мы хотим, потому что заявление "Хочу ВОТ ТАКУЮ кнопочку" даже гугл не поймет. Необходимо четко представлять, чего именно Вы ходите добиться.
Сформулируем нашу задачу: "Необходимо, чтобы на сайте появлялась кнопка. При прокрутке страницы до определенного места и при нажатии на эту кнопку страница должна мгновенно прокрутиться к началу без перезагрузки. При прокрутке ниже указаного места кнопка должна быть видна. При обратной прокрутке выше указаного места кнопка должна исчезнуть". Вот как-то так.
Разобьем нашу задачу на более мелкие задания:
1. Нарисовать кнопку в определенном месте, чтобы она оставалась на месте при прокрутке страницы;
2. Определить позицию, после прокрутки которой кнопка должна появляться;
3. Сделать, чтобы кнопка появляась при прокрутке ниже указанного места;
4. Сделать, чтобы кнопка исчезала при прокрутке выше указанного места;
5. Добавить обработчик щелчка по кнопке, который прокрутит страницу к началу.
Ну, вот теперь задача должна быть понятной и можно искать решение каждой отдельной подзадачи. Приступим.
Рисуем кнопку в определенном месте, чтобы она оставалась на месте при прокрутке страницы.
HTML
< !-- Приблуда "Наверх"-- >
< div title='Кликните, чтобы прокрутить страницу наверх' id='up_button' >
Наверх
< /div >
< !--/Приблуда "Наверх"-- >
Пояснение: Рисуем обычный див и пишем в нем нужный текст, или вставляем картинку. Это уже как Вам больше нравится. Не забываем указать id кнопки. Нам с ней дальше работать!
CSS
#up_button{
text-align:center; // Выравниваем текст по середине (если нужно)
padding-top:20px; // Задаем отступ от верхнего края страницы
font-size:2em; // Задаем размер шрифта
width:200px; // Задаем ширину кнопки
color:#999; // Задаем цвет текста
height:100%; // Задаем высоту кнопки размеров в экран или страницу, не суть важно
position:fixed; // Фиксируем кнопку на странице (прокрутка на нее не влияет)
cursor:pointer; // Задаем тип курсора "Указатель"
}
Пояснение: Думаю, из комментариев все понятно.
#up_button:hover{
color:#fff; // Меняем цвет текста
}
Пояснение: Обрабатываем событие "Выделение" для кнопки. Изменять стиль можете по своему вкусу.
Примечание: Располагайте кнопку выше всех элементов страницы. Сразу после тега body!!! Иначе не сможете ее правильно позиционировать.
Определяем позицию, после прокрутки которой кнопка должна появляться.
Что под этим имеется в виду? А то, что кнопку предполагается отображать, например, слева под блоком меню. А меню, например, двухуровневое и при раскрытии одного из пунктов его высота изменяется. Поэтому постает задача определить высоту блока меню в конкретный момент времени.
Делается это вот так:
< script type='text/javascript' >
var h_left_bar=parseInt(document.getElementById('left_bar').clientHeight);
< /script >
Пояснение: При помощи jscript определяем клиентскую высоду элемента left_bar (наше меню), округляем ее до целого и сохраняем в переменную h_left_bar.
Если же у Вас статическое одноуровневое меню или левый блок статического размера, то можно так не заморачиваться, а просто взять его высоту в пикселях.
Делаем, чтобы кнопка появлялась при прокрутке ниже указанного места и исчезала при прокрутке выше указанного места.
Для обработки прокрутки страницы в JQuery есть событие scroll объекта window. Для реализации необходимой нам функции просто необходимо при возникновении события прокрутки страницы проверить не прокрутили ли мы страницу ниже нужного места.
Чтобы использовать JQuery, необходимо скачать эту библиотеку на хост сайта и подключить:
< script type='text/javascript' src='jquery.min.js' >< /script >
Далее собственно наш код:
< script type='text/javascript' >
$(window).scroll( function (){ //Обавляем обработчик события прокрутки страницы
var scrolledpx = parseInt($(window).scrollTop()); // Определяем количество прокрученных пикселей
var h_left_bar=parseInt(document.getElementById('left_bar').clientHeight); // Определям высоту левого блока (см. выше)
if(scrolledpx >= h_left_bar+100) // Если прокручено столько-то пикселей от начала страницы
{
document.getElementById('up_button').style.display='block'; // Отображаем кнопку
}
else
{
document.getElementById('up_button').style.display='none'; // Скрываем кнопку
}
});
< /script >
Пояснение: все написано в комментариях. Думаю, все и так понятно.
Примечание: Каждый браузер имеет свой шаг прокрутки, поэтому в условии (scrolledpx >= h_left_bar+100) добавлено +100 к высоте блока. Подберите это значение экспериментально путем открытия сайта в различных браузерах.
Добавляем обработчик щелчка по кнопке, который прокрутит страницу к началу.
< !-- Приблуда "Наверх"-- >
< div id='up_button' title='Кликните, чтобы прокрутить страницу наверх'
onclick='this.style.display="none";$(window).scrollTop(0);' > // Обработчик клика
Наверх
< /div >
< !--/Приблуда "Наверх"-- >
Вот собственно и все!
Посмотреть как работает данный пример, Вы можете переместив взгляд левее. Кнопочка слева вверху.
Пробуйте. Делайте Ваш сайт лучше!
Рубрика: Web programming
Авторы: Коваленко Н. А.
Опубликовано: 27.11.11 07:16
