Как вернуться к именованному якорю после прокрутки в Chrome?

Question

Если я загружаю URL с именованным якорем (например,Вот этот), Chrome переносит меня прямо на часть страницы, содержащую якорь. Пока все хорошо.

Но если я немного прокрутю, я могу потерять след, где был якорь. Как мне вернуться к названному якорю?

Я пробовал обновить страницу, но Chrome не возвращает меня к якорю. Я пробовал принудительное обновление (Ctrl-F5), но безрезультатно. Я также пробовал Ctrl-L (чтобы выбрать адресную строку), а затем ENTER, чтобы перезагрузить страницу.

Мой обходной путь — закрыть вкладку, а затем открыть новую с полным URL. Это довольно раздражает того, кто читает много спецификаций! Есть ли способ получше?

Answer 1

Вы можете просто выполнить JavaScript-код, чтобы прокрутить элемент в верхнюю часть представления:

document.getElementById(location.hash.slice(1)).scrollIntoView()

Источник:javascript - Как прокрутить HTML-страницу до заданного якоря? - Stack Overflow

Для удобства можно добавить это как закладку на панель закладок илиопределить сочетание клавиш для этого.

javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()

Если в URL нет хэша, это вызовет (скрытую) ошибку JavaScript. Чтобы прокрутить страницу вверх, используйте

(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()

Answer 2

Используйте этот букмарклет:

javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

Объяснение:

• Настройка location.hashприведет к прокрутке страницы до этой точки привязки.
• В качестве особого случая можно location.hashзадатьсамявляется пустой операцией.
• Этоделаетпрокрутка, однако, если мы установим ее начто-то другоеа затем сразу же вернуться к исходному значению.
• Наконец, букмарклеты должны иметь null/ undefinedв качестве своего конечного значения или (по историческим причинам) они заменяют тело страницы своим конечным значением.

---

[Далее только для «дополнительных баллов»]

В качестве альтернативы мы могли бы сделать что-то вроде ответа пользователя 202729. Его ответ работает только с якорями, сформированными с помощью <a id="foo">. Они не работают с якорями, которые используют <a name="foo">, например, те, которые используются здесь на SU/SO/SE! Мы можем отловить их (возможно, с ложными срабатываниями — я не так уж много изучал этот подход) с помощью

javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()

Однако даже этот подход не работает на таких сайтах, как github.com, которые используют <a class="anchor" href="#foo">. AFAICT, этот подход нестандартен и требует пользовательского javascript. Мой первоначальный подход выше работает на всех трех стилях якорей.

ps Мне нравится совместная работа идей, которые могут прийти из SE. Читаю ответ пользователя 202729 вместе с ответом Дина Хардинга наКак прокрутить HTML-страницу до заданного якоря?дал мне идеи, необходимые для экспериментов и поиска ответа.

Answer 3

Чтобы дополнить решение @Noach, я хотел бы добавить информацию о том, как создать букмарклет. Букмарклеты — это закладки браузера, которые выполняют JavaScript вместо открытия веб-страницы.

К сожалению, здесь, в superuser.com, невозможно создать ссылку на букмарклет из-за ограничений синтаксиса. Поэтому вам нужно добавить ее вручную.

Чтобы добавить букмарклет в Chromium, вы можете щелкнуть правой кнопкой мыши на панели закладок, затем нажать «Добавить страницу...».
Или вы можете перейти в менеджер закладок, затем щелкнуть правой кнопкой мыши и нажать «Добавить новую закладку»:

В поле "Имя" вставьте re-anchor. Этот текст вы увидите на панели закладок.
В поле "URL" вставьтеjavascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

Затем поместите созданный букмарклет где-нибудь на панели, чтобы при необходимости можно было щелкнуть по нему.