Справа внизу Вы видите у меня зеленую стрелку. Если прокрутить страницу вниз, а потом нажать на эту стрелку, то произойдет перемещение к самому верху страницы. Давайте разберемся, как это сделано.
На сегодняшний день я знаю два варианта решения этой задачи. Первый вариант без использования JavaScript(я использую именно его) самый простой.
Его особенности:
1. Стрелка видна всегда и не меняет прозрачность при наведении на нее курсора.
2. При нажатии на стрелку производится немедленное перемещение к самому верху страницы.
Теперь покажу, как это реализовать.
Сначала рисуем картинку указателя. У меня - это стрелка размером примерно 50x50px, хотя может быть и другая картинка(к примеру, прямоугольник с надписью).
Размещаем ее на сервере.
Далее осталось только разместить следующий код:
<html>
<head>
<title>Перемещение вверх по странице</title>
<style type='text/css'> a:hover {text-decoration:underline; color: #33aaff;
</style>
<style type='text/css'>.backtotop a:hover {background:none;}
</style>
</head>
<body>
<div class='backtotop'>
<a class='backtotop' href='#' rel='nofollow'
style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Go Top'>
<img src='scrollup.png' style='border:0;'/></a>
</div>
</body>
</html>
<head>
<title>Перемещение вверх по странице</title>
<style type='text/css'> a:hover {text-decoration:underline; color: #33aaff;
</style>
<style type='text/css'>.backtotop a:hover {background:none;}
</style>
</head>
<body>
<div class='backtotop'>
<a class='backtotop' href='#' rel='nofollow'
style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Go Top'>
<img src='scrollup.png' style='border:0;'/></a>
</div>
</body>
</html>
На этом все. Как видите, все действительно очень просто.
В следующей статье я расскажу о втором варианте решения этой задачи с использованием JavaScript и получением некоторых дополнительных эффектов.
