Como faço para vincular a parte de uma página? (cerquilha?)

210

Como você vincula (com <a>) para que o navegador vá para determinadas subposições na página de destino e não para o topo?

html xhtml anchor Haroldo
fonte

Respostas:

275

Se houver uma <a name="foo">tag ou qualquer tag com id(por exemplo, <div id="foo">), você poderá simplesmente anexar #fooao URL. Caso contrário, você não poderá vincular arbitrariamente a partes de uma página.

Aqui está um exemplo completo: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Vinculando conteúdo no mesmo exemplo de página: <a href="#foo">Jump to #foo on same page</a>

Daniel DiPaolo
fonte
60
Apenas uma observação: no HTML5, não há mais nameatributo para - <a>elementos: o atributo name no elemento a é obsoleto. Considere colocar um atributo id no contêiner mais próximo.
usar o seguinte comando
então você usa o exemplo completo ou o mesmo exemplo de página? o exemplo completo não é a mesma coisa?
Akantoword
2
se tivéssemos uma página tranqüila com url como: domain.com/#home?page=1como usar um id no href?
iraj jelodari
1
@irajjelodari Você colocaria o hash no final:domain.com/?page=1#home
tomsmeding 15/11
Eu tive que usar 2 hashtags no url como: example.com/#RouteName?page=1#ID. um para roteamento e outro para navegação dentro da página atual. Finalmente, utilizado html5 modo de URL, a fim de remover percurso hashtags;) @tomsmeding
iraj jelodari
41

Você usa uma âncora e um hash. Por exemplo:

Alvo do link:

 <a name="name_of_target">Content</a>

Link para o destino:

 <a href="#name_of_target">Link Text</a>

Ou, se vincular a partir de uma página diferente:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
fonte
8
O broser também irá pular para qualquer elemento com o ID name_of_target. Você não precisa usar uma <a>tag como destino. Então, outro alvo poderia ser <h3 id='name_of_target'>Content</h3>.
Cyrille
8
Observe que agora está obsoleto no HTML5.
Tim
32

Basta anexar um hash com um ID de um elemento ao URL. Por exemplo

<div id="about"></div>

e

http://mysite.com/#about

Portanto, o link seria semelhante a:

<a href="http://mysite.com/#about">About</a>

ou apenas

<a href="#about">About</a>
Felix Kling
fonte
21

Aqui está como:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>
Sarfraz
fonte
2
Você o que? Você tem um fechamento </a>após uma abertura <div ...>- não tem muita certeza do que está tentando fazer aqui.
Dominic Rodger
1
copiei minha linha de link e colei abaixo e esqueci de fechar a div. Obrigado de qualquer forma.
Sarfraz 14/05
10

Você tem duas opções:

Você pode colocar uma âncora no seu documento da seguinte maneira:

<a name="ref"></a>

Ou então, você fornece um ID para qualquer elemento HTML:

<h1 id="ref">Heading</h1>

Em seguida, basta anexar o hash #refao URL do seu link para ir para a referência desejada. Exemplo:

<a href="document.html#ref">Jump to ref in document.html</a>
Daniel Vassallo
fonte
6

Em 12 de março de 2020, um WICG para fragmentos de texto foi adicionado ao rascunho e agora você pode vincular o texto a uma página como se estivesse procurando por ele, adicionando o seguinte ao hash

#:~:text=<Text To Link to>

Exemplo de trabalho em Chrome Version 81.0.4044.138 :

Clique neste link Deve recarregar a página e destacar o texto do link

Abderrahmane TAHRI JOUTI
fonte