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

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