Как создавать ссылки, которые прокручивают к фрагменту текста

Быстрые ссылки

• Как создавать ссылки, которые прокручивают к фрагменту текста

Уже хотели сделать ссылку, которая открывает длинную страницу и автоматически прокручивает к нужному абзацу? Начиная с Google Chrome 80 в браузере появилась возможность Deep Linking — «Scroll To Text Fragment» (фрагменты текста). Эта функция работает без участия разработчика сайта: вы формируете URL с параметром, и Chrome находит совпадающий текст на странице, прокручивает к нему и подсвечивает.

Важно: пока это работает только в Google Chrome 80 и новее. Чтобы проверить версию, откройте Меню > Справка > О Google Chrome.

Как это работает — быстрый пример

Откройте ссылку (в Chrome) и увидите, как браузер загрузит страницу и прокрутит вниз, подсветив фразу «About Us»:

howtogeek.com/#:~:text=about%20us

Вы ничего не добавляли на сайт — Chrome реагирует на параметр в конце URL, находит соответствующий текст и подсвечивает его.

Google также выпустил расширение и букмарклет, чтобы упростить создание таких ссылок, так что писать URL вручную не обязательно.

Синтаксис: базовая форма

Добавьте в конец адреса страницы следующий фрагмент:

#:~:text=WORD

Замените WORD на слово или фразу, которую ищете. Для пробела используйте %20 (URL-кодировка). Пример: чтобы ссылаться на слово “competitions” в статье Wikipedia о собаках, возьмите

https://en.wikipedia.org/wiki/Dog

и добавьте

#:~:text=competitions

Получится:

https://en.wikipedia.org/wiki/Dog#:~:text=competitions

Более сложные варианты (когда одно слово не хватает)

Text Fragments поддерживает более точные описания: можно указывать контекст вокруг искомой фразы для лучшей точности (например, начало и конец фрагмента). Это полезно в плотных документах, где одно слово встречается много раз. Для технических деталей смотрите черновик спецификации Text Fragments.

Пример приёма: если простое слово даёт несколько совпадений, укажите несколько слов или часть предложения, закодированную через %20.

Когда это не сработает

• Браузер не поддерживает Text Fragments (не-Chrome 80+). Ссылка откроется, но прокрутки/подсветки не будет.
• Страница динамически генерирует контент клиентским JavaScript и элемент с текстом появляется позже — браузер может не найти его при первичной загрузке.
• Текст на странице изменился: точного совпадения нет.

Альтернативы

• Технически правильный метод — добавить в HTML якорь id и ссылаться через #id. Требует изменения сайта.
• Скрипты типа scrollIntoView в JavaScript — для сайтов, где вы контролируете код.
• Пользовательская функция “Найти на странице” (Ctrl/Cmd+F) — ручной метод.
• Расширения или букмарклеты от Google, которые автоматически формируют фрагмент по выделению.

Мини‑метод: как составить надёжную ссылку

1. Откройте страницу в Chrome 80+.
2. Нажмите Ctrl/Cmd+F и найдите нужную точную фразу.
3. Скопируйте URL страницы.
4. Вставьте в конец #:~:text= и добавьте вашу фразу с URL-кодировкой пробелов как %20.
5. Проверьте ссылку в новой вкладке.

Практические советы и хитрости

• Старайтесь указывать фразу длиной 3–8 слов, чтобы снизить вероятность ложных совпадений.
• Если делаете ссылку для внешних пользователей, укажите в сопровождающем тексте, что ссылка работает в Chrome.
• Для внутренних инструкций используйте якоря id — они надёжнее и не зависят от браузера.

Приватность и безопасность

• Обсуждались вопросы приватности: фрагмент текста попадает в URL и может быть отправлен/логирован в реферере или сохранён пользователем. Оценивайте риск раскрытия чувствительного фрагмента в открытом URL.
• Мошенники могли бы ссылаться на вырезку, ведущую к контенту, который выдаёт контекст вне контекста — проверяйте источник.

Важно: не вставляйте в фрагменты конфиденциальные строки (пароли, персональные данные, токены).

Для кого это полезно — чеклист ролей

• Контент-редактор: используйте для быстрых ссылок на длинные статьи.
• Веб-разработчик: не надеяться на это как на основной механизм навигации; добавляйте id якорей при возможности.
• QA: тестируйте в разных браузерах и на страницах с динамическим контентом.
• SRE/Security: проверьте логи и правила реферера на наличие чувствительных фрагментов.

Критерии приёмки

• Ссылка в Chrome 80+ открывается и прокручивает к нужному тексту.
• В других браузерах страница открывается корректно (без прокрутки).
• В URL не содержится чувствительной информации.

Короткая методика отката

Если ссылка не работает: проверьте версию Chrome, убедитесь, что текст не изменился, попробуйте длиннее уникальную фразу или используйте id-якорь.

Заключение

Text Fragments в Chrome дают простой способ делиться точными частями длинных страниц без правки сайта. Подходит для быстрых ссылок и обмена информацией, но требует осторожности по совместимости и приватности.

Ключевые ресурсы: черновик спецификации Text Fragments и расширение/букмарклет от Google.

Сводка:

• Работает в Chrome 80+.
• Не требует правки сайта.
• Используйте осторожно из‑за приватности.