🎯 Smooth Scroll

⌨️ Teclado: Usa las flechas ↑ ↓ para navegar

👆 Táctil: Toca la mitad superior/inferior de la pantalla

html { scroll-behavior: smooth; }
↓

✨ Características

La propiedad CSS scroll-behavior: smooth hace que el navegador anime automáticamente el desplazamiento cuando usas enlaces ancla o JavaScript para cambiar la posición de scroll.

No necesitas JavaScript adicional, ¡solo una línea de CSS!

/* Aplicar a todo el documento */ html { scroll-behavior: smooth; } /* O solo a un elemento específico */ .container { scroll-behavior: smooth; }

🖼️ Navegación con Enlaces

Los enlaces ancla funcionan automáticamente con scroll suave. ¡Prueba estos botones para navegar entre secciones!

🏠 Inicio ✨ Características 💬 JavaScript 📧 Compatibilidad

💬 JavaScript API

También puedes usar JavaScript para hacer scroll programáticamente. La API scrollIntoView respeta la propiedad CSS automáticamente.

// Scroll suave con JavaScript const elemento = document.getElementById('seccion'); elemento.scrollIntoView({ behavior: 'smooth', block: 'start' }); // También funciona con window.scrollTo window.scrollTo({ top: 1000, behavior: 'smooth' });

📧 Compatibilidad

¡Llegaste al final! Toca la parte superior para volver al inicio.

/* Para navegadores antiguos, usa fallback */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Compatibilidad: Chrome 61+, Firefox 36+, Safari 15.4+, Edge 79+ */

¿Notaste la diferencia? 🚀

💡 Navega con flechas del teclado o tocando arriba/abajo de la pantalla

← Volver a Demos