Путь: Заметки о вёрстке сайтов > JavaScript > 18

Что делать с якорями

9 мая 2002 г.

Июнь 2000-ного. Артемий Лебедев выдаёт на суд интернет-общественности 52-й параграф своего ру/ководства. Дизайнер номер один с особой яростью восстаёт против использования якорей. Одним из веских доводов является тот факт, что перемещение внутри страницы записывается в историю.

Автор статьи: Азат Разетдинов

Июнь 2000-ного. Артемий Лебедев выдаёт на суд интернет-общественности 52-й параграф своего ру/ководства «Не взлетим,так поплаваем». Дизайнер номер один с особой яростью восстаёт против использования якорей (<a name=>). Одним из веских доводов является тот факт, что перемещение внутри страницы записывается в историю.

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

<script language=JavaScript></script> <a href=#aaa onClick="return goTo('#aaa')">AAA</a> <a href=#bbb onClick="return goTo('#bbb')">BBB</a>

«Теперь якорями хоть обвешайся» — замечает довольный Артемий.

Решение действительно оригинальное, учитывая особенность функции location.replace(), которая по сути открывает в окне браузера другую страницу, при этом не добавляя пункт в историю. Для стройности можно исключить дублирование адреса, иначе при изменении ссылок придётся обновлять их в двух местах:

<a href=#aaa onClick="return goTo(this.href)">AAA</a>

И всё же обработка события onClick в каждой ссылке основательно засоряет код. Кроме того, хотя фокус с location.replace хорошо проходит в IE и NN, Opera напрочь отказывается прыгать по странице таким образом. Обе проблемы решает скрипт для всего тэга body:

<HEAD> <SCRIPT language=JavaScript></SCRIPT> </HEAD> <BODY onClick="return Click();"> <A href=#aaa>AAA</A> <A href=#bbb>BBB</A>  <A name=aaa>aaa</A> <A name=bbb>bbb</A> </BODY>

Opera и, к сожалению, NN загибаются на event.srcElement, возвращаются в код и нормально обрабатывают нажатие по ссылке, обновляя историю. В целом этот способ выигрывает, т. к. в первом случае владельцы Opera вообще не могут перемещаться по странице.

В итоге фокус проходит только в IE, но и здесь нас подстерегают аж два глюка. Вот мы перешли по внутренней ссылке. Чудесным образом исчез title документа. Нажали Back, браузер послушно открыл предыдущую страницу (так и должно быть — этого мы добивались). Теперь решили возвратиться, нажали Forward… IE не открывает прежнюю страницу!

Этого недостатка лишён следующий, третий способ, основанный на использовании метода scrollIntoView(). Он прокручивает страницу таким образом, чтобы заданный элемент оказался в поле зрения пользователя. Об обновлении истории не может быть и речи, т. к. адрес не меняется вовсе. Реализация этой идеи:

<HEAD> <SCRIPT language=JavaScript></SCRIPT> </HEAD> <BODY onClick="return Click();"> <A href=#aaa>AAA</A> <A href=#bbb>BBB</A>  <A id=aaa>aaa</A> <A id=bbb>bbb</A> </BODY>

На примере видно, как из адреса ссылки извлекается конечный id, который, с одной стороны, используется в скрипте, с другой — служит обычным якорем в случае, когда JavaScript отключён. Логический аргумент метода scrollIntoView() определяет, появится ли элемент вверху (true) или внизу (false) экрана.

Пару слов о ссылках «в начало», следующих после каждого блока текста. Однажды я натолкнулся на странную их реализацию в руководстве к Parser’у того же Лебедева: ссылками на оглавление являлись… сами заголовки! Уже через пару минут юзанья пришлось признать удобство этого решения.

Автор статьи: Азат Разетдинов