Меню

Главная

О себе

Олимпиады

Конкурсы

Методические

разработки

ЕГЭ

ОГЭ

Обратная связь

Копилка учителя

Полезные уроки

Статьи

Тесты

Программы

Воспитательная

работа

Публикации

Интернет-сообщества

Техника безопасности

Проекты

Безопасный Интернет

Раздел Вопросы и Ответы

 

 

 

 

 

   Урок 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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 ^Наверх

             Персональный сайт учителя информатики  Целищевой Елены Дмитриевны