<html><body> <details open><summary>This is the summary</summary> <a name="a1"></a> <p>Here are all the details.</p> </details> <p>Imagine more than a page of text here.</p> <p><a href="#a1">This</a> is a link pointing inside the details.</p> </body></html>Estoy abriendo mi código HTML anterior con el navegador Firefox. Cuando hago clic en el enlace "Este", Firefox se desplaza correctamente a la página de detalles.
Sin embargo, cuando hago clic en el triángulo a la izquierda del título "Este es el resumen", y los detalles (incluida la línea con el ancla) se cierran (desaparecen), al hacer clic en el enlace, Firefox ya no se desplaza hasta el ancla.
Habría esperado que Firefox al menos se desplazara hasta el resumen visible que oculta el ancla incluso cuando los detalles están cerrados, pero lo ideal sería que también abriera los detalles y se desplazara exactamente hasta el ancla.
¿Hay alguna forma (¿HTML? ¿CSS? ¿Usando qué navegador? ¿Otra?) que permita desplazarse a los anclajes en detalles cerrados (doblados) del bloque de resumen de detalles?
Mi pregunta está relacionada con Desplazarse al ancla al expandir detalles/resumen. , pero preferiría una solución sin javascript si existe.
Para probar su solución, sustituya "más de una página de texto aquí" por más de una página de texto.
El problema es que las etiquetas de anclaje solo se desplazan a un elemento local si coincide con un atributo id , no name . Debe tener un elemento que coincida con la identificación dada en a href para desplazarse hasta él. Aquí está el código fijo:
<html> <body> <details> <summary>This is the summary</summary> <a id="a1">Scroll here</a> <p> Here are all the details. Imagine more than a page of text. </p> </details> <p> <a href="#a1">This</a> is a link pointing inside the details. </p> </body> </html> Editar: Además, la razón por la que no se desplaza a los elementos dentro de los details cuando está cerrado es porque esos elementos no se representan realmente. El enlace solo se desplaza a los elementos que se están representando actualmente. Puede obtener una vista previa de esto fácilmente agregando style="padding-bottom: 100vh" a la etiqueta de details y haciendo clic en a etiqueta en la parte inferior. Si desea que aún se desplace hacia él, debe agregar algo de JS para abrir primero la etiqueta de details cuando se hace clic a la etiqueta dada o simplemente agregar la identificación a1 a la etiqueta de details .
Un paso preliminar hacia la solución:
var details = [...document.getElementsByTagName("details")]; document.addEventListener('click', function(e) { details.forEach( (D,_,A) => D.contains(e.target) ? D.addAttribute('open') : '') }) Sin embargo, en lugar de e.target de alguna manera, se debe usar el ancla dirigida.
Iterar sobre todos los details tiene la ventaja de que, en caso de que el ancla esté dentro de varios bloques cerrados, todos se abrirán.