Simplemente agregue un #seguido del ID de la <a>etiqueta (u otra etiqueta HTML, como a <section>) a la que está tratando de acceder. Por ejemplo, si está intentando vincular al encabezado en este HTML:
<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>
Podrías usar el enlace <a href="http://url.to.site/index.html#target">Link</a>.
¿Qué pasa si esa identificación se usa varias veces? Me encontré con un sitio de MS que usó el idde id="in-closing">Some string</id>varias veces donde se Some stringconvirtió en una nueva cadena un par de veces.
kayleeFrye_onDeck
5
@kayleeFrye_onDeck Su HTML no es válido si hay varios de id. Por definición, idse pretende que sea exclusivo de esa etiqueta
Kolob Canyon
1
¡Gracias por aclarar, @KolobCanyon! :)
kayleeFrye_onDeck
¿Hay alguna forma de hacer esto con una clase que solo se usa una vez?
Chagai Friedlander
Tal vez solo fui ingenuo, pero cuando lo hice accidentalmente www.site.com/page/#targetfallé. Asegúrese de no tener el /al final de la URL.
Noah
29
Cree un "enlace de salto" con el siguiente formato:
http://www.somesite.com/somepage#anchor
Donde ancla es la identificación del elemento al que desea vincular en esa página. Utilice las herramientas de desarrollo del navegador / ver la fuente para encontrar la identificación del elemento al que desea vincular.
Si el elemento no tiene una identificación y usted no controla ese sitio, entonces no puede hacerlo.
¿Qué pasa si la parte específica de la página web no tiene una identificación asociada?
ajaysinghnegi
Luego, deberá agregar la identificación al elemento
capotas
1
¿Puedo agregar una identificación a una etiqueta en una página web en Internet?
ajaysinghnegi
2
No, si desea hacer esto en otro sitio web, puede intentar crear un marcador JS personalizado para desplazarse a la parte a la que desea desplazarse. No puede hacer que los enlaces anclados funcionen si los identificadores no están configurados.
Capuchas
¿Puede vincular a algo que especificó anteriormente para hacer eso? No he hecho nada de ese tipo antes.
ajaysinghnegi
10
Eso solo es posible si ese sitio ha declarado anclas en la página. Se hace dando a una etiqueta un nombre o un atributo de identificación , así que busque cualquiera de los que estén cerca de donde desea vincular.
El nameatributo solo se admite en el <a>elemento para esto, y está obsoleto en HTML 5.
Quentin
Se está enfocando demasiado bajo en el elemento para mí. ¿A alguien le ha pasado lo mismo?
Cañón Kolob
8
En caso de que la página de destino esté en el mismo dominio (es decir, comparte el mismo origen con su página) y no le importa la creación de nuevas pestañas (1), puede (ab) usar algo de JavaScript :
<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>
Trivialidades:
var w = window.open('some URL of the same origin');
w.onload = function(){
// do whatever you want with `this.document`, like
this.document.querySelecotor('footer').scrollIntoView()
}
Un ejemplo práctico de tal 'exploit' que puede probar ahora mismo podría ser:
Si ingresa esto en la barra de ubicación (tenga en cuenta que Chrome elimina el javascript:prefijo cuando se pega desde el portapapeles) o conviértalo en unhref valor de cualquier enlace en esta página (usando las herramientas de desarrollo) y hace clic en él, obtendrá otra (duplicada) página de preguntas SO desplazada a el pie de página y el pie de página están pintados de rojo. (Retraso agregado como una solución para el contenido cargado ajax empujando el pie de página hacia abajo después de la carga).
Notas
Probado en Chrome y Firefox actuales, generalmente debería funcionar ya que se basa en un comportamiento estándar definido.
No se puede ilustrar en un fragmento interactivo aquí en SO, porque están aislados del origen de la página.
(1) window.open(url,'_self')parece estar rompiendo el loadevento; básicamente hace que se window.opencomporte como una a href=""navegación de clic normal ; aún no he investigado más.
eh, no se desplazó hasta la parte inferior y la parte inferior no es roja
John D
1
… Y tampoco abrió nueva ventana, supongo. Lo más probable es que se deba a que la ejecución de javascript:enlaces escritos en la barra URL ya no funciona en la mayoría de los navegadores con la configuración predeterminada, como prevención "self-XSS". Pero puede probarlo en la consola de desarrolladores web, donde debería funcionar bien.
myf
¿Alguien podría editar esto y hacerlo más fácil de usar? No soy un experto en javascript y no pude averiguar qué hacer
Chagai Friedlander
3
Primero fuera del objetivo se refiere al BlockID que se encuentra en el código HTML o en las herramientas de desarrollo de Chrome a las que está tratando de vincular. Cada código es diferente y deberá investigar un poco para encontrar la identificación a la que intenta hacer referencia. Debería verse algo así. div class="page-container drawer-page-content" id"PageContainer"Tenga en cuenta que este es el formato para toda la sección referenciada, no un texto o una imagen individual. Para hacer eso, necesitaría encontrar la misma pieza de código pero relacionada con su bloque de destino. Por ejemplo dv id="your-block-id"De todos modos, estaba leyendo este hilo y se me ocurrió una idea, si eres un usuario de Shopify y quieres hacer esto, es más o menos lo mismo que se dijo. Pero en lugar de
> http://url.to.site/index.html#target
Tu pondrias
> http://storedomain.com/target
Por ejemplo, estoy configurando una página de exención de responsabilidad con enlaces que llevan a la suscripción a un boletín informativo y bloques de compras en mi página de inicio, así que inserto https://mystore-classifier.com/#shopify-section-1528945200235mi hipervínculo. Tenga en cuenta que el -clasificador es para mi uso interno y no se aplica a usted. Esto es solo para poder realizar un seguimiento de mis tiendas. Si desea vincular a algo que no sea su página de inicio, debe poner
> http://mystore-classifier.com/pagename/#BlockID
Espero que a alguien le haya resultado útil, si hay algún problema con mi explicación, hágamelo saber, ya que no soy un programador HTML, ¡mi lenguaje es C #!
Básicamente, agrega #targetText=al final de la URL y el navegador se desplazará hasta el texto de destino y lo resaltará después de que se cargue la página.
Está en la versión de Chrome que se ejecuta en mi escritorio, pero actualmente debe habilitarse manualmente. Es de suponer que pronto se habilitará de forma predeterminada en las versiones de producción de Chrome y otros navegadores seguirán, así que está bien comenzar a agregar a sus enlaces ahora y comenzará a funcionar entonces.
Respuestas:
Simplemente agregue un
#
seguido del ID de la<a>
etiqueta (u otra etiqueta HTML, como a<section>
) a la que está tratando de acceder. Por ejemplo, si está intentando vincular al encabezado en este HTML:Podrías usar el enlace
<a href="http://url.to.site/index.html#target">Link</a>
.fuente
id
deid="in-closing">Some string</id>
varias veces donde seSome string
convirtió en una nueva cadena un par de veces.id
. Por definición,id
se pretende que sea exclusivo de esa etiquetawww.site.com/page/#target
fallé. Asegúrese de no tener el/
al final de la URL.Cree un "enlace de salto" con el siguiente formato:
Donde ancla es la identificación del elemento al que desea vincular en esa página. Utilice las herramientas de desarrollo del navegador / ver la fuente para encontrar la identificación del elemento al que desea vincular.
Si el elemento no tiene una identificación y usted no controla ese sitio, entonces no puede hacerlo.
fuente
Eso solo es posible si ese sitio ha declarado anclas en la página. Se hace dando a una etiqueta un nombre o un atributo de identificación , así que busque cualquiera de los que estén cerca de donde desea vincular.
Y luego la sintaxis sería
fuente
name
atributo solo se admite en el<a>
elemento para esto, y está obsoleto en HTML 5.En caso de que la página de destino esté en el mismo dominio (es decir, comparte el mismo origen con su página) y no le importa la creación de nuevas pestañas (1), puede (ab) usar algo de JavaScript :
<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>
Trivialidades:
Un ejemplo práctico de tal 'exploit' que puede probar ahora mismo podría ser:
javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('/programming/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')
Si ingresa esto en la barra de ubicación (tenga en cuenta que Chrome elimina el
javascript:
prefijo cuando se pega desde el portapapeles) o conviértalo en unhref
valor de cualquier enlace en esta página (usando las herramientas de desarrollo) y hace clic en él, obtendrá otra (duplicada) página de preguntas SO desplazada a el pie de página y el pie de página están pintados de rojo. (Retraso agregado como una solución para el contenido cargado ajax empujando el pie de página hacia abajo después de la carga).Notas
window.open(url,'_self')
parece estar rompiendo elload
evento; básicamente hace que sewindow.open
comporte como unaa href=""
navegación de clic normal ; aún no he investigado más.fuente
javascript:
enlaces escritos en la barra URL ya no funciona en la mayoría de los navegadores con la configuración predeterminada, como prevención "self-XSS". Pero puede probarlo en la consola de desarrolladores web, donde debería funcionar bien.Primero fuera del objetivo se refiere al BlockID que se encuentra en el código HTML o en las herramientas de desarrollo de Chrome a las que está tratando de vincular. Cada código es diferente y deberá investigar un poco para encontrar la identificación a la que intenta hacer referencia. Debería verse algo así.
div class="page-container drawer-page-content" id"PageContainer"
Tenga en cuenta que este es el formato para toda la sección referenciada, no un texto o una imagen individual. Para hacer eso, necesitaría encontrar la misma pieza de código pero relacionada con su bloque de destino. Por ejemplodv id="your-block-id"
De todos modos, estaba leyendo este hilo y se me ocurrió una idea, si eres un usuario de Shopify y quieres hacer esto, es más o menos lo mismo que se dijo. Pero en lugar deTu pondrias
Por ejemplo, estoy configurando una página de exención de responsabilidad con enlaces que llevan a la suscripción a un boletín informativo y bloques de compras en mi página de inicio, así que inserto
https://mystore-classifier.com/#shopify-section-1528945200235
mi hipervínculo. Tenga en cuenta que el -clasificador es para mi uso interno y no se aplica a usted. Esto es solo para poder realizar un seguimiento de mis tiendas. Si desea vincular a algo que no sea su página de inicio, debe ponerEspero que a alguien le haya resultado útil, si hay algún problema con mi explicación, hágamelo saber, ya que no soy un programador HTML, ¡mi lenguaje es C #!
fuente
La próxima función "Desplazarse al texto" de Chrome es exactamente lo que está buscando ...
https://github.com/bokand/ScrollToTextFragment
Básicamente, agrega
#targetText=
al final de la URL y el navegador se desplazará hasta el texto de destino y lo resaltará después de que se cargue la página.Está en la versión de Chrome que se ejecuta en mi escritorio, pero actualmente debe habilitarse manualmente. Es de suponer que pronto se habilitará de forma predeterminada en las versiones de producción de Chrome y otros navegadores seguirán, así que está bien comenzar a agregar a sus enlaces ahora y comenzará a funcionar entonces.
fuente