Como posso retornar a uma âncora nomeada após rolar no Chrome?

Question

Se eu carregar um URL com uma âncora nomeada (comoEste), o Chrome me leva diretamente para a parte da página que contém a âncora. Até agora tudo bem.

Mas se eu rolar um pouco, posso perder a noção de onde estava a âncora. Como posso retornar à âncora nomeada?

Tentei atualizar a página, mas o Chrome não me leva de volta à âncora. Tentei a atualização forçada (Ctrl-F5), sem efeito. Também tentei Ctrl-L (para selecionar a barra de endereço) seguido de ENTER para recarregar a página.

Minha solução alternativa é fechar a guia e abrir uma nova novamente com o URL completo. Isso é muito chato para quem lê muitos documentos de especificações! Existe uma maneira melhor?

Answer 1

Você pode simplesmente executar algum JavaScript para rolar o elemento até o topo da visualização:

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

Fonte:javascript - Como rolar a página HTML para uma determinada âncora? - Estouro de pilha

Por conveniência, é possível adicionar isso como favorito na barra de favoritos oudefina um atalho de teclado para ele.

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

Quando não há hash no URL, causará um erro de JavaScript (silencioso). Para rolar até o topo da página, use

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

Answer 2

Use este bookmarklet:

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

Explicação:

• A configuração location.hashfará com que a página role até essa âncora.
• Como um caso especial, definir location.hashparaem sié um ambiente autônomo.
• Istofazrolar, no entanto, se definirmos comoalgo maise imediatamente de volta ao valor original.
• Finalmente, os bookmarklets devem ter null/ undefinedcomo valor final ou (por razões históricas) substituir o corpo da página pelo seu valor final.

---

[O seguinte é apenas para "crédito extra"]

Alternativamente, poderíamos fazer algo parecido com a resposta do user202729. Sua resposta só funciona com âncoras formadas por <a id="foo">. Eles não funcionam com âncoras que usam <a name="foo">, por exemplo, aquelas usadas aqui em SU/SO/SE! Podemos capturá-los (possivelmente com falsos positivos - não explorei muito essa abordagem) com

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

No entanto, mesmo essa abordagem falha em sites como o github.com, que usam <a class="anchor" href="#foo">. AFAICT, essa abordagem não é padrão e requer javascript customizado. Minha abordagem inicial acima funciona em todos os três estilos de âncora.

ps Adoro a colaboração de ideias que podem vir do SE. Lendo a resposta do usuário202729 junto com a resposta de Dean Harding paraComo rolar a página HTML para uma determinada âncora?me deu as ideias que eu precisava para experimentar e chegar à minha resposta.

Answer 3

Para complementar a solução do @Noach, gostaria de adicionar informações sobre como criar um bookmarklet. Bookmarklets são marcadores de navegador que executam JavaScript em vez de abrir uma página da web.

Infelizmente, não é possível criar um link de bookmarklet aqui em superuser.com, devido à limitação da sintaxe. Então você precisa adicioná-lo manualmente.

Para adicionar um bookmarklet no Chromium, você pode clicar com o botão direito na barra de favoritos e clicar em "Adicionar página...".
Como alternativa, você pode ir ao gerenciador de favoritos, clicar com o botão direito e clicar em "Adicionar novo favorito":

No campo "Nome" cole re-anchor. Este texto é o que você verá na barra de favoritos.
No campo "URL" colejavascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null

Em seguida, coloque o bookmarklet recém-criado em algum lugar da barra, para que você possa clicar nele quando necessário.