TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #279 976
Возможности гиперссылок

У элемента <a> есть несколько особенностей, связанных с атрибутом href. Они помогают в некоторых ситуациях обойтись без JS и решить задачу нативным способом. Джим Нильсен поделился этими особенностями.

- <a href="#"> — прокручивает страницу к верхней части, что можно использовать для создания плавающей кнопки «наверх»;

- <a href="#top"> — так же прокручивает страницу к верхней части, если нет элементов с id="top";

- <a href="doc.pdf#page42"> — при просмотре PDF через браузер открывает 42-ю страницу, если она есть;

- <a href=""> — перезагружает текущую страницу, сохраняя параметры, но удаляя идентификатор фрагмента (example.com?foo=bar#bazexample.com?foo=bar);

- <a href="."> — перезагружает страницу, удаляя параметры и идентификатор фрагмента, но нужно помнить про слэш в конце пути (example.com?foo=bar#bazexample.com);

- <a href="?"> — перезагружает страницу, удаляя параметры и идентификатор фрагмента, но оставляет символ ? (example.com?foo=bar#bazexample.com?);

- <a href="data:text/plain,Hello"> — перенаправляет на страницу с текстом Hello или другими данными в зависимости от указанного типа. Можно использовать для встраивания небольшого объёма данных;

- <a href="video.mp4#t=10,20"> — при обращении к аудио или видео через браузер, перематывает плеер на 10-ю секунду и останавливает воспроизведение на 20-й секунде;

- <a href="#:~:text=foo"> — перенаправляет на страницу, прокручивает к первому вхождению текста foo и подсвечивает его.

Также не стоит забывать о схемах, которые можно использовать в href: tel:, mailto:, sms:, javascript: и пользовательских обработчиках схем, создаваемых через registerProtocolHandler().

#html
Jim Nielsen’s Blog A Few Things About the Anchor Element’s href You Might Not Have Known I’ve written previously about reloading a document using only HTML but that got me thinking: What are all the values you can put in an anchor tag’s href attribute?
  • 🔥 26
  • 🤝 9
  • ❤ 4
  • 🤔 1
More from @alexnozer_dev
  1. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  2. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  3. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  4. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  5. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  6. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →