Yo te dejo otro pero sin jQuery ya que no estamos en ese foro.
Código Javascript
:
Ver original[].forEach.call(document.querySelectorAll("a"), function(a){
var elem = document.querySelector(a.getAttribute("href")), interval, val;
a.addEventListener("click", function(event){
val = 0;
event.preventDefault();
interval = setInterval(function(){
val += 10;
document.body.parentNode.scrollTop = val;
document.body.scrollTop = val;
if (val >= elem.offsetTop){
document.body.parentNode.scrollTop = elem.offsetTop;
document.body.scrollTop = elem.offsetTop;
clearInterval(interval);
}
}, 1);
}, false);
});
Lo que hago es simple. Recorro el conjunto de enlaces y por cada uno, tomo al elemento al que apuntan, además de crear dos variables que usaré más adelante. Luego, cuando de un clic sobre cualquier enlace, inicializo el valor de
val en cero, prevengo el accionar del
clickeado el cual sería el
scrolling hasta la ubicación del elemento al que apunta.
Enseguida, utilizo un temporizador el cual asigno a
interval y por cada ejecución de la función que contiene, sumo 10 a
val y asigno dicho valor al atributo
scrollTop de los elementos
<body> y
<html> para así ir moviendo el
scroll de la página de a pocos. Cuando el valor de
val sea mayor o igual que el de la ubicación del elemento al que el enlace está apuntando, fijamos el valor del atributo
scrollTop de los elementos
<body> y
<html> en dicho valor (puede que a veces se pase algunos píxeles, muy pocos) y desactivo el temporizador. Todo esto se ejecutará cada milésima de segundo, dándole el efecto de desplazamiento suave y continuo.
Saludos