Scroll "animado"

legomolina · #1 (**permalink**) 19/01/2015, 11:26

Buenas, me gustaría poner esta "animación" a mi web. Es decir, cuando yo estoy en la parte superior y hago click en un enlace a la misma página (punto de ancla) donde el scroll se mueve (la página baja), pues que no fuese un salto sino que fuese bajando como si lo moviese el user.
http://gyazo.com/7a55b2c730103c43d059254b941316d5
Algo así pero que también valiese para bajar.
Gracias

pzin · #2 (**permalink**) 19/01/2015, 15:26

Lo muevo al foro de JavaScript porque no tiene nada que ver con CSS.

martinmiranda90 · #3 (**permalink**) 19/01/2015, 16:47

Hola. Te dejo este ejemplo que he elaborado a ver si es lo que buscas:
[URL]http://jsfiddle.net/go3vvzcn/33/[/URL]
Espero haberte ayudado

.

legomolina · #4 (**permalink**) 19/01/2015, 16:54

Eso es. Perfecto. Muchas gracias :) Si tengo alguna duda respondo a este post. Gracias otra vez

Alexis88 · #5 (**permalink**) 19/01/2015, 17:07

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);
});

DEMO

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

legomolina · #6 (**permalink**) 19/01/2015, 17:33

Muchas gracias a ambos :)