JS: Наглый блок или делаем кнопку «Вверх»

Сегодня поговорим о том, как сделать кнопку «вверх» для длинной Интернет страницы. На самом деле речь больше пойдет о блоке, который будет двигаться вместе с прокруткой страницы и находится в одной позиции, а кнопка «вверх» это лишь один из вариантов применения данного метода…

Создадим новый HTML файл и добавим в него стандартный код, а так же набъем его содержимым:

<html>
<head>
<script type="text/javascript">
function PlaceText()
{
   var b = document.getElementById("bd");
   for (var i = 0; i < 250; i++)
      b.innerHTML += i + "<br/>";
}
</script>
</head>
<body id="bd" onload="PlaceText();">
</body>
</html>

Собственно мы получили страницу, на которой расположены цифры от 0 до 249, причем каждая цифра расположена в новой строке.
Теперь добавим div блок, который будет являться нашей кнопкой с заданными свойствами:

<html>
<head>
<style>
.Up {
 cursor: pointer;
 background: url('http://blog.foolsoft.ru/downloads/up.png');
 padding-left: 25px;
 width: 72px;
 height: 20px; 
 position: fixed; 
 right: 20px;
}
</style>
<script type="text/javascript">
function PlaceText()
{
   var b = document.getElementById("bd");
   for (var i = 0; i < 250; i++)
      b.innerHTML += i + "<br/>";
}
</script>
</head>
<body id="bd" onload="PlaceText();">
<div class="Up"><b>Наверх</b></div>
</body>
</html>

Рассмотрим свойства нашего div:
cursor: pointer; — Служит для того, что бы при наведении на блок курсор менялся на изображение руки. т.е. создаем эффект кнопки;

background: url(‘http://blog.foolsoft.ru/downloads/up.png’); — задаем в качестве фоновой картинки изображение по указанному адресу (в нашем случае 97х20px);

padding-left: 25px; — так как фоновое изображение имеет декоративный элемент, то текст в блоке нужно печатать с небольшим смещением, допустим 25px;

width: 72px; — задаем ширину нашего блока. Так как изображение 97px в ширину, то тут стоило бы указать значение 97, однако мы указали отступ от левого края 25px, поэтому данное число уже включено в ширину объекта, осталось добавить 72px (72+25=97);

height: 20px; — ширина блока. Так как отступы не указаны, то берем высоту нашей картинки;

position: fixed; — означает, что блок будет находится в фиксированной точке Интернет страницы;
right: 20px; — блок расположен справа страницы с отступом в 20px;

Результат работы кода Вы видете на данной странице. Для того чтобы кнопка возвращала Вас на начало страницы можно использовать следующий javascript код (добавить событие onclick на div):

window.scrollTo(0, 0);
//Возможно не работает в некоторых браузерах

Далее можете украшать Вашу кнопку как хотите: например сделать плавную прокрутку, эффект при наведении мыши и прочее.

Запись опубликована в рубрике JavaScript с метками , , , . Добавьте в закладки постоянную ссылку.