Hoy vamos a ver una opción que según en que proyectos es bastante útil y es el scrolling, ese efecto de hacer click en un elemento del menú y hacer que la página haga ella sola un scroll hasta la parte específica de la web.

Hay muchas formas de hacer esto, pero cuando trabajas con frameworks puede ser que haya conflictos con las clases y no obtener los resultados deseados o que haya fallos. Pero con el script que vamos a ver en JQuery, el resultado es realmente excepcional con apenas esfuerzo.

Para lograrlo, obviamente lo primero que tenemos que hacer es enlazar JQuery en nuestra web de alguna de las formas posibles, yo por norma general prefiero utilizar un CDN, dentro de la etiqueta head de nuestra aplicación:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Después de esto necesitamos introducir nuestro script, ya sea por medio de un nuevo archivo o al final de nuestro archivo, como de costumbre lo mejor es hacerlo en un archivo externo.

Nuestro script es simplemente este:

$('a.scroll').click(function(e){
 e.preventDefault();
 $('html, body').stop().animate({scrollTop: $($(this).attr('href')).offset().top}, 1000);
});

Para terminar lo único que queda por hacer es crear nuestros enlaces ancla y poner la clase scroll en los enlaces.

De este modo quedaría un enlace de la siguiente forma:

<a href="#portfolio" class="scroll">Portfolio</a>

Este enlace está apuntando a la sección con la id portfolio

<section id="portfolio"></section>

De este modo tan sencillo podemos tener nuestro efecto de scrolling, y si quieres cambiar el tiempo del movimiento cambia el 1000 por el valor que quieras en milisegundos.

Naturalmente si quieres puedes usarlo con todos los enlaces que quieras en la web siempre que apunten correctamente y sin tener que tocar JQuery.

¿Te ha resultado interesante o útil? Comparte esta entrada