Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

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

Источник: realcoding.net

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

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

<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>



Похожие статьи:
- Про тэги и метатэги
- CSS: советы и приёмы, часть 1
- Слежение за контентом на динамических сайтах
- Обработка строк в РНР
- Грамотная работа с файлами: исключительная блокировка файлов
- Таблицы и границы
- Списки a la MS Word
- Какой нужен сайт? (продолжение)
- Язык XML
- SEO-специалист делится своими секретами
- Продвижение сайта в поисковых системах
- PHP include уязвимость: от теории к практике
- Легкая навигация


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]