Suavizar movimiento del scroll con Jquery

Hay usuarios que no prestan mucha atención al movimiento que hace el scroll cuando nos movemos por la página. En ocasiones este movimiento al ser muy rígido, choca con la estética o la interactividad de la página. Como por ejemplo, en las páginas web hacen uso de parallax.
En el caso de Firefox, este movimiento es bastante suave; en Internet explorer es algo más suave rígido y en Google Chrome es rígido por completo.

Con este fragmento de código y la ayuda de Jquery, podemos suavizar y animar el movimiento que hace el scroll al subir y bajar.

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
	var delta = 0;
	if (event.wheelDelta) delta = event.wheelDelta / 120;
	else if (event.detail) delta = -event.detail / 3;

	handle(delta);
	if (event.preventDefault) event.preventDefault();
	event.returnValue = false;
}

function handle(delta) {
	var time 	= 1000;
	var distance 	= 400;

	$('html, body').stop().animate({
		scrollTop: $(window).scrollTop() - (distance * delta)
	}, time );
}

Modificando las variables time y distance podéis ajustarlo más a vuestra medida, incluso variarlo dependiendo del tamaño del dispositivo.
Aquí Podéis ver una pequeña demo.

You may also like...

1 Response

  1. Pedro PC dice:

    Muchas gracias, es exactamente lo que estaba buscando.

Deja un comentario