He pasado horas en esto y siendo un novato en JavaScript/JQuery todavía no sé cómo hacer lo siguiente:
Tengo un enlace de anclaje "volver al principio", en el pie de página de mis páginas, que enlaza con el encabezado. Entiendo que hay un código CSS para hacer de este un movimiento de desplazamiento suave (lento):
html { scroll-behavior: smooth; }Pero esto no funciona en Safari.
En el sitio web de CSS Tricks ( https://css-tricks.com/snippets/jquery/smooth-scrolling/ ) dice que hay una alternativa de JavaScript al CSS anterior:
window.scroll({ top: 2500, left: 0, behavior: 'smooth' }); Pero, ¿cómo o dónde agrego esto a mi enlace / página? Supongo que me gustaría top: 0,
Mi HTML es este:
<header id="top">.... </header> <footer> <a href="#top"><img class="to-top" src="resources/arrow.svg"></a> </footer>ACTUALIZAR He intentado lo siguiente, pero no funciona. ¿Alguna idea de por qué?
<footer> <a href="#top" onclick="window.scroll({ top: 0, behavior: 'smooth' })"><img class="to-top" src="resources/arrow.svg"></a> </footer>Utilice el evento onclick :
<header id="top">....</header> <div style="background-color: red; height: 1200px"></div> <footer> <a style="cursor:pointer;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"><img class="to-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Feather-arrows-arrow-up.svg/24px-Feather-arrows-arrow-up.svg.png"></a> </footer>