Сегодня поговорим о том, как сделать кнопку «вверх» для длинной Интернет страницы. На самом деле речь больше пойдет о блоке, который будет двигаться вместе с прокруткой страницы и находится в одной позиции, а кнопка «вверх» это лишь один из вариантов применения данного метода…
Создадим новый 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); //Возможно не работает в некоторых браузерах
Далее можете украшать Вашу кнопку как хотите: например сделать плавную прокрутку, эффект при наведении мыши и прочее.
