Te dejo una alternativa con efecto de desplazamiento suave usando CSS.
Para crear un efecto suave solo tendrías que añadir scroll-behavior: smooth;
al elemento HTML
, esto te permite un desplazamiento suave de toda la página.
html {
scroll-behavior: smooth;
}
Nota: también es posible agregarlo a un elemento / contenedor de desplazamiento específico.
Para dirigirte a un contenido en específico simplemente le pases el valor del atributo id al enlace, algo como <a href="#contacto">Contacto</a>
y la caja del contenido seria <section id='contacto'></section>
Posible ejemplo:
html {
scroll-behavior: smooth;
}
a {
color: white;
}
a:hover {
color: #CCCCCC;
}
#red,
#blue {
background-color:red;
display: block;
position: relative;
min-height: 250px;
padding:50px;
margin-bottom:50px;
}
#blue {
background-color:blue;
}
<div id="red">
<h1>Inicio</h1>
<a href="#blue">Contacto</a>
</div>
<div id='blue'>
<h1>Contacto</h1>
<a href="#red">Inicio</a>
</div>