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



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

Наверх