В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 27. Ссылка "Наверх страницы"



Иногда страница сайта может быть очень длинной. Например, если вы захотите выложить очень много текста. Для возвращения вверх можно воспользоваться колесом прокрутки, или бегунком. Но на многих сайтах для возвращения назад существует соответствующая ссылка или кнопка, нажав на которую, вы даёте команду браузеру и он быстро возвращает страницу в исходное положение.

Подобную ссылку можно прописать минимум четырьмя способами. рассмотрим их преимущества и недостатки.

1-й способ

Пропишем ссылку подобно тому, как прописываются "якоря" для страницы, о которых шла речь в Уроке 16 Выглядеть это будет так:

Вверху страницы вы ставите "якорь". Например, я поставила в него часть заглавия страницы: "В этом разделе..."

<a name="top"> В этом разделе </a>

Внизу страницы вы помещаете ссылку "НАВЕРХ":

<a href="#top"> НАВЕРХ </a>

НАВЕРХ

У этого способа есть один недостаток. Браузеры не всегда адекватно себя ведут с подобными ссылками. Например, если вы наведёте курсор мыши на надпись вверху страницы "В этом разделе" - то скорее всего вы увидите, что помещённая в "якорь" часть фразы начинает отображаться, как ссылка.

Для того, чтобы ничего такого не происходило и не нужно было искать, что бы поместить в "якорь", можно поступить по способу 2.

2-й способ

Можно попробовать просто разместить внизу станицы ссылку вида:

<a href="#"> НАВЕРХ </a>, ничего более не указывая браузеру.

НАВЕРХ

Теоретически, ни один браузер не должен возражать против такого способа и по клику возвращать страницу в исходное положение. Но более надёжно поступить следующим образом, который мы рассмотрим в способе 3.

3-й способ

Разместим внизу страницы ссылку вида:

<a href="#" onClick="scroll(0,0); return false" title="наверх"> НАВЕРХ </a>

НАВЕРХ

При данном способе мы задействуем указание на прокрутку-возвращение по клику, где значения (0,0) - это перемотка страницы на указанное количество пикселей по горизонтали и вертикали. Если мы обнулим эти значения, то любой браузер воспримет нашу ссылку как указание вернуться в исходное положение, то есть, на начало страницы. И наконец, чуть отличающийся четвёртый способ.

4-й способ

Этот способ основан на JavaScript и так же, как предыдущий, однозначно работает в любом браузере. В низу страницы, под вашим текстом или картинками вы размещаете следующую конструкцию:

<a href="javascript:scroll(0,0)" > НАВЕРХ </a>

НАВЕРХ

Здесь, как видите, тоже есть указание на то, чтобы прокрутить страницу на указанные пикселы (0,0), которые мы обнуляем и в результате, когда мы нажимаем на данную ссылку, браузер возвращает страницу в первоначальное положение.

Само собой, во всех указанных способах можно вместо слова "НАВЕРХ" расположить картинку, обозначающую возвращение к началу страницы.

Примечание: вместо надписи "НАВЕРХ" (Вернуться к началу, Вверх, К оглавлению и т.п.) вы можете поставить картинку, вписав её код вида <img src="адрес_картинки.jpg"> . Вся ваша конструкция будет выглядеть, например, так:

<a href="#top"> <img src="адрес_картинки.jpg"> </a>



Урок окончен.


Перейти к Уроку 28


© М.В. Гуминенко. 2009 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг