Урок 21
Как сделать кнопку "вверх" на сайте
На больших страницах для
того, чтобы пользователям вашего сайта было удобно
возвращаться в начало страницы делают кнопку "наверх". При нажатии на эту кнопку пользователь возвращается в начало
страницы.
Пример 1.
Самый простой способ - это в
конце страницы вставить следующий код:
<a href=#top onClick="scrollTo(0,0);
return false;">Здесь
Ваш текст</a>
Текст, который написан красным
цветом, заменяем на свой. Например: "вернуться в начало
страницы" или просто "наверх".
Пример 2.
При
прокрутке страниц вниз появляется кнопка, которая будет
передвигаться за вами по всей высоте страницы (в правой
части страницы сайта). В любой момент вы можете подняться вверх. Скрипт для
плавного скроллинга (прокрутки) страницы
вверх я взяла здесь
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
Чтобы перевести страницу можно воспользоваться
Google переводчиком.
Шаг 1.
Данный код вставьте перед закрывающим тегом
<HEAD>
на странице:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code
library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full
source code
***********************************************/
</script>
Шаг 2.
Скачайте следующий архив,
распакуйте его и имеющиеся там два файла закачайте на сервер в
папку с сайтом. архив В архиве один из файлов - это
файл с изображением стрелки. Его можно заменить на свою картинку, но только с
таким же именем и форматом (расширением).
Пример 3.
Код:
<
a
href
=
"#"
title
=
"Вернуться
к началу"
class
=
"topbutton"
>^Наверх</
a
>
^Наверх