Si cargo una URL con un ancla con nombre (comoÉste), Chrome me lleva directamente a la parte de la página que contiene el ancla. Hasta ahora, todo bien.
Pero si me desplazo un poco, puedo perder la noción de dónde estaba el ancla. ¿Cómo puedo volver al ancla nombrada?
Intenté actualizar la página, pero Chrome no me lleva de regreso al ancla. Intenté la actualización forzada (Ctrl-F5), sin resultado. También probé Ctrl-L (para seleccionar la barra de direcciones) seguido de ENTER para recargar la página.
Mi solución es cerrar la pestaña y luego abrir una nueva nuevamente con la URL completa. ¡Esto es bastante molesto para alguien que lee muchos documentos de especificaciones! ¿Existe una mejor manera?
Respuesta1
Simplemente puedes ejecutar algo de JavaScript para desplazar el elemento a la parte superior de la vista:
document.getElementById(location.hash.slice(1)).scrollIntoView()
Fuente:javascript - ¿Cómo desplazar la página HTML hasta un ancla determinada? - Desbordamiento de pila
Para mayor comodidad, es posible agregar esto como favorito en la barra de favoritos, odefinir un atajo de teclado para ello.
javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()
Cuando no hay hash en la URL, provocará un error de JavaScript (silencioso). Para desplazarse hasta la parte superior de la página, utilice
(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()
Respuesta2
Utilice este marcador:
javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null
Explicación:
- La configuración
location.hashhará que la página se desplace hasta ese ancla. - Como caso especial, establecer
location.hashensí mismoes una operación no operativa. - Élhacedesplazarse, sin embargo, si lo configuramos enalgo másy luego inmediatamente de vuelta al valor original.
- Finalmente, los bookmarklets deben tener
null/undefinedcomo su valor final o (por razones históricas) reemplazan el cuerpo de la página con su valor final.
[Lo siguiente es sólo para "crédito adicional"]
Alternativamente, podríamos hacer algo similar a la respuesta del usuario202729. Su respuesta sólo funciona con anclajes formados por <a id="foo">. ¡No funcionan con anclajes que usan <a name="foo">, por ejemplo, los que se usan aquí en SU/SO/SE! Podemos detectarlos (posiblemente con falsos positivos; no exploré mucho este enfoque) con
javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()
Sin embargo, incluso ese enfoque falla en sitios como github.com que usan <a class="anchor" href="#foo">. AFAICT, ese enfoque no es estándar y requiere JavaScript personalizado. Mi enfoque inicial anterior funciona en los tres estilos de anclaje.
PD: Me encanta la colaboración de ideas que pueden surgir de SE. Leyendo la respuesta del usuario202729 junto con la respuesta de Dean Harding a¿Cómo desplazar la página HTML hasta un ancla determinada?Me dio las ideas que necesitaba para experimentar y encontrar mi respuesta.
Respuesta3
Para complementar la solución de @Noach, quería agregar información sobre cómo crear un bookmarklet. Los bookmarklets son marcadores del navegador que ejecutan JavaScript en lugar de abrir una página web.
Desafortunadamente, no es posible crear un enlace de bookmarklet aquí en superuser.com debido a limitaciones de sintaxis. Entonces necesitas agregarlo manualmente.
Para agregar un marcador en Chromium, puede hacer clic con el botón derecho en la barra de marcadores y luego hacer clic en "Agregar página...".
Alternativamente, puede ir a su administrador de marcadores, luego hacer clic derecho y hacer clic en "Agregar nuevo marcador":
En el campo "Nombre", pegue re-anchor. Este texto es lo que verás en la barra de marcadores.
En el campo "URL" pegarjavascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null
Luego, coloque ese marcador recién creado en algún lugar de la barra, para que pueda hacer clic en él cuando sea necesario.