¿Es posible crear un hipervínculo a una posición de desplazamiento específica en una página web? Por ejemplo, me gustaría crear un enlace a http://www.stackoverflow.com/ , pero con la página desplazada hacia abajo 100 píxeles.
Respuestas:
Puede desplazarse a una posición determinada utilizando el complemento jQuery scrollTo . Si echa un vistazo a su página de demostración , verá que el complemento es capaz de muchas opciones diferentes, incluido el desplazamiento a una determinada posición. Sin embargo, eso significaría que tendría que controlar el JavaScript del objetivo, por lo que esto podría no ser adecuado para un enlace a un sitio externo.
El enlace de vainilla a algún lugar de la página es a través de un punto de anclaje ya presente en la página.
Esto se puede crear usando la <a>…</a>etiqueta. Tenga en cuenta que el enlace especificado en "punto de anclaje" (arriba) tiene #h-12.2al final. Esto corresponde a <a id="h-12.2">12.2</a>incrustado en el HTML que forma la página, y cuando se hace clic en él, la posición de la página se vuelve a colocar en este ancla.
Tenga en cuenta que antes de HTML5, el nameatributo se usaba en la etiqueta de anclaje, pero ya no es compatible y el idatributo debe usarse en su lugar ( referencia ). Esto también significa que puede usar cualquier elemento para una etiqueta de anclaje, no está limitado al <a>elemento.
Similar a la respuesta de Paul, también puede vincular a la primera aparición de una ID de etiqueta en un documento HTML. Sin embargo, esta no será una cantidad exacta de píxeles.
Por ejemplo, enlace / desplazamiento a la pregunta o respuestas de esta página .
Intente hacer clic derecho e inspeccionar elementos en la página. Encontrarás las <a>etiquetas, esos son los puntos de anclaje.
Luego saque el <antes y el primero y el último apara que no aparezcan como enlaces. En realidad, puede ver los efectos mientras escribe en el cuadro de respuesta cuando le muestra la vista previa a continuación.
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
y
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Como puede ver, la única diferencia es al final, donde los nombres de ancla después del #símbolo de libra ( ). el nombre después de >es para cómo se lee el enlace al usuario.
En este caso, "encabezado de pregunta" se lee como "pregunta" y las respuestas son las mismas.
Luego, lo siguiente debería vincular al comentario de Mike . Dado que su punto de anclaje es382094
Para aclarar, simplemente puede encontrar el ancla y agregar el #después de su enlace.
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
todos estos lo llevarán a diferentes lugares en la misma página.
Para vincular a una posición específica de píxel en una página, coloque la etiqueta de anclaje dentro de un div que se coloca absolutamente usando las coordenadas "top: x left: y".
Puede usar Citebite para vincular a una posición específica de una página web, incluso si no usa id en esa posición. Es fácil de usar. Simplemente vaya al enlace que proporcioné aquí y luego pegue el fragmento del texto que desea mostrar primero después de ir a su página web en el campo de texto de Cita y luego proporcione el enlace de la página web en el campo de texto URL de origen. Luego haga clic para hacer Citebite. Entonces generará un enlace. Ese enlace será tu enlace deseado.