Справа внизу Вы видите у меня зеленую стрелку. Если прокрутить страницу вниз, а потом нажать на эту стрелку, то произойдет перемещение к самому верху страницы. Давайте разберемся, как это сделано.
На сегодняшний день я знаю два варианта решения этой задачи. Первый вариант без использования 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 и получением некоторых дополнительных эффектов.
14 коммент.:
У меня на блоге стоит такая кнопка. Очень удобно.
Спасибо большое, у меня такой стрелочки еще нет. Думаю - это полезная вещь. Спасибо большое за быстрое решение)) Все понятно написано, обязательно ее поставлю.
Интересное решение. Удобно для владельцев ноутбуков, у которых нет отдельно мышки. Хотя я почему-то подумала, что если на нее тыкнуть, то какое-нибудь окно появится...
Николай здравствуйте. Подскажите пожалуйста, как опытный пользователь,как правильно сделать подписную страницу и с помощью чего(каких программ).Я свою сделал, но вместо текста, какая-то абра-кадабра. Мой мэйл: vetal6@mail.ru
Ну, например, с помощью Adobe Dreamweaver CS5
:)
Надеюсь, что завтра опубликую еще одну статью, посвященную решению этого вопроса.
Очень нужная стрелочка, не нужно прокручивать мышью всю страницу, чтоб вернуться в начало.
Как сделать, чтобы при нажатии на картинку в IE не появлялась прерывистая рамка вокруг?
К сожалению, в IE не пробовал - не пользуюсь я им. Проверю.
На сайте не видно, а в примере есть. После нажатия фокус остаётся на кнопке, вот видимо IE и отрисовывает пунктиром. В FF15 рамки нет.
p.s. кстати, пример в IE работает некорректно, если в начале страницы нет
!DOCTYPE HTML
Виктор, еще раз говорю, что не пользуюсь я IE! Ну, не проверял я на IE, извините!
Не совсем поняла, где надо разместить стрелку на каком сервере? На хостинг картинку разместить? А код куда вставить? Я с кодами плохо дружу. Мы ставили плагин на сайт, но его пришлось удалить, он сильно тормозил сайт.
Отправить комментарий