Tengo esta página que es básicamente una lista de tareas, donde puedes agregar una cantidad infinita de tareas de todo tipo y, por supuesto, si agregas muchas tareas, la altura de la página se hará más grande y la barra de desplazamiento va a aparecer. También tengo este botón fijo en la parte inferior derecha de la página, y su única función es enviarte de vuelta a la parte superior de la página. Lo que me gustaría hacer es configurar la visualización del botón en ninguno solo en caso de que la altura de la página no sea mayor que la altura de la ventana gráfica (por lo que no se puede desplazar), porque sería inútil en este caso, y luego establecer su mostrar para bloquear en caso de que la página haya superado los 100vh.
No lo he probado, pero estoy bastante seguro de que esto podría hacerse con consultas de @media:
.topbutton { display: none; } @media screen and (min-height: 100vh) { .topbutton { display: block; } }Una forma sencilla de hacer esto es verificar si el valor de posición de window.scrollY es 0 . De lo contrario, puede suponer que el contenido de la página es más alto que la ventana gráfica y que la página se desplaza, por lo que puede mostrar/ocultar un botón "volver al principio" en consecuencia. Por ejemplo:
window.addEventListener('scroll', () => { const toTopLink = document.getElementById('toTopLink'); if (window.scrollY > 0) { toTopLink.classList.remove('hidden'); } else { toTopLink.classList.add('hidden'); } }); <ul> <li>List Item</li> <li>List Item</li> <li>...</li> </ul> <a id="toTopLink" class="hidden" href="#">Scroll to Top</a> #toTopLink { display: block; position: fixed; /* ... */ } #toTopLink.hidden { display: none; }Aquí hay un violín que muestra esta solución en acción (tenga en cuenta que deberá cambiar el tamaño de la altura de la ventana en consecuencia para ver el comportamiento de desplazamiento):
https://jsfiddle.net/dwq4h82x/8/
Para un poco de bondad adicional, podría hacer algo como esto en lugar de alternar display: none :