Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Особенности ссылок «вверх страницы»

13 ноября 2002 г.

Когда размер страницы превосходит некоторый предел, разработчики часто ставят внизу текстовую или графическую ссылку «вверх страницы». Эта ссылка позволяет быстро перейти в начало страницы, что иногда бывает очень удобно.

Когда размер страницы превосходит некоторый предел, разработчики часто ставят внизу текстовую или графическую ссылку «вверх страницы». Эта ссылка позволяет быстро перейти в начало страницы, что иногда бывает очень удобно.

Классически подобная ссылка верстается так:

<a name="top">…</a>

много-много текста

<a href="#top">вверх страницы</a>

Недостатком этого метода является то, что необходимо какой-то элемент вверху страницы поместить в якорь (<a name="top">), так как некоторые браузеры не понимают пустые якоря. Кроме того, при переходе к якорю в Internet Explorer исчезает название страницы в заголовке браузера, и не совсем логично работает кнопка Back (подробнее об этих особенностях читайте в заметке «Что делать с якорями»)

Но от этих проблем можно избавиться, перехитрив браузер. Для этого достаточно просто указать пустую ссылку <a href="#">вверх страницы</a>, не задавая никаких якорей. Браузер без лишних раздумий прокрутит страницу вверх. Я специально посмотрел в спецификации, что она имеет сказать на этот счёт, но не нашел никаких указаний, как UA должен действовать в ситуации, когда имя якоря не указано. Хорошо, что в этом недокументированном поведении абсолютно все браузеры проявляют единодушие.

Наконец, хотелось бы указать ещё один способ установки ссылки «вверх страницы». Он основан на JavaScript и не вызывает никаких побочных эффектов:

много-много текста

<a href="javascript:scroll(0,0)">вверх страницы</a>

Здесь был использован метод window.scroll(x,y), который позволяет промотать страницу на указанное количество пискелов по горизонтали (x) и вертикали (y). Если мы обнулим эти два параметра, то будет восстановлен статус кво — страница проскролится в начало.

Напоследок скажу, что я обычно придерживаюсь последнего предложенного метода, который работает в подавляющем большинстве браузеров и при этом не основан на каких-либо нестандартных «фичах».

P. S. Как правильно подсказал Николай Меркин, наиболее совместимым решением будет такой вариант:

<a href="#" onClick="scroll(0,0); return false" title="наверх">вверх страницы</a>

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

очищение организма
LiveInternet