Para conseguir un desplazamiento suave en la página al hacer clic en enlaces internos (enlaces hacia anclas), puedes usar CSS. En realidad no necesitas nada más.
Puedes probar esta declaración de estilos:
html {
scroll-behavior: smooth;
}
Con eso podrás habilitar el desplazamiento suavizado.
Cómo hacerlo con Javascript
En realidad scroll-behavior: smooth es una propiedad CSS que está bastante extendido en los navegadores modernos. Pero si en el navegador que te interesa no hay soporte a esta propiedad de CSS, también podrías hacerlo con Javascript. De hecho es como se hacía anteriormente.
Puedes usar el siguiente código básico:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Este script selecciona todos los enlaces que comienzan con # (lo hace mediante un selector de CSS de atributo), y luego agrega un evento click que evita el comportamiento predeterminado del enlace (la navegación predeterminada). En lugar de ello hace el desplazamiento suavemente hacia el elemento destino.
Solo hay una cosa muy importante y es que el elemento de destino debería ser un elemento con el identificador que se haya usado como nombre del ancla.
Por ejemplo si el enlace es así:
<a href="#link">Enlace interno</a>
El ancla es un elemento de la página que tenga id="link":
<p id="link">Aquí está el ancla</p>
Te dejo un ejemplo de página donde se puede ver en uso este script de Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>probando enlaces internos suavizados</title>
<style>
p { font-size: 1.6rem; line-height: 2.5rem;}
</style>
</head>
<body>
<p>
<a href="#link">Enlace interno</a>
</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p id="link">Aquí está el ancla</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>