¿Cómo hago un enlace a parte de una página? (¿picadillo?)

210

¿Cómo se vincula (con <a>) para que el navegador vaya a ciertos subtítulos en la página de destino en lugar de la parte superior?

html xhtml anchor Haroldo
fuente

Respuestas:

275

Si hay una <a name="foo">etiqueta o cualquier etiqueta con un id(por ejemplo, <div id="foo">), simplemente puede agregar #fooa la URL. De lo contrario, no puede vincular arbitrariamente a partes de una página.

Aquí hay un ejemplo completo: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Vinculación de contenido en el mismo ejemplo de página: <a href="#foo">Jump to #foo on same page</a>

Daniel DiPaolo
fuente
6060
Solo una nota: en HTML5 ya no hay ningún nameatributo para <a>-elementos: el atributo de nombre en un elemento está obsoleto. Considere colocar un atributo de identificación en el contenedor más cercano.
insertusernamehere
Entonces, ¿utiliza el ejemplo completo o el mismo ejemplo de página? ¿No es el ejemplo completo lo mismo?
akantoword
2
si tuviéramos una página tranquila con URL como: domain.com/#home?page=1¿cómo usar una identificación en href?
iraj jelodari
1
@irajjelodari Ponerías el hash al final:domain.com/?page=1#home
tomsmeding
Tuve que usar hashtags 2 en la url como: example.com/#RouteName?page=1#ID. uno para enrutamiento y otro para navegación dentro de la página actual. finalmente utilicé el modo html5 de URL para eliminar los hashtags de la ruta;) @tomsmeding
iraj jelodari
41

Usas un ancla y un hash. Por ejemplo:

Objetivo del enlace:

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

Enlace al objetivo:

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

O, si se vincula desde una página diferente:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
fuente
8
El broser también saltará a cualquier elemento con la identificación name_of_target. No necesita usar una <a>etiqueta como objetivo. Entonces otro objetivo podría ser <h3 id='name_of_target'>Content</h3>.
Cyrille
8
Tenga en cuenta que esto ahora está obsoleto en HTML5.
Tim
33

Simplemente agregue un hash con una ID de un elemento a la URL. P.ej

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

y

http://mysite.com/#about

Entonces el enlace se vería así:

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

o solo

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

Aquí es cómo:

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

<div id="go_middle">Hello There</div>
Sarfraz
fuente
2
¿Tu que? Tienes un cierre </a>después de una apertura <div ...>, no estoy realmente seguro de lo que estás tratando de hacer aquí.
Dominic Rodger
1
Copié mi línea de enlace y pegué a continuación y olvidé cerrar el div. Gracias de todos modos.
Sarfraz
10

Tienes dos opciones:

Puede colocar un ancla en su documento de la siguiente manera:

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

O bien, le da una identificación a cualquier elemento HTML:

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

Luego simplemente agregue el hash #refa la URL de su enlace para saltar a la referencia deseada. Ejemplo:

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

El 12 de marzo de 2020, WICG agregó un borrador para fragmentos de texto , y ahora puede vincular el texto en una página como si lo estuviera buscando agregando lo siguiente al hash

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

Ejemplo de trabajo sobre Chrome Version 81.0.4044.138:

Haga clic en este enlace. Debe volver a cargar la página y resaltar el texto del enlace.

Abderrahmane TAHRI JOUTI
fuente