BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jQuery Smooth Scrolling plugin

24/FEB/2012 6.206 visitas Ver comentarios
jQuery Smooth Scrolling plugin

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Smooth Scrolling es un plugin desarrollado en jQuery que sirve para crear un sistema de navegación on-page, es decir, las típicas páginas web de 1 sólo html.

Hablando más claro, si tienes una web con poco contenido y quieres desarrollarla solo en un html pero con el contenido bien organizado, este plugin te viene pintado.

Sólo basta con definir un menú de navegación que quedará siempre fijo en pantalla y luego tantos divs o capas como opciones tenga ese menú... el plugin se encargará de hacer el resto.

Lo genial es que agrega tanto la barra de navegación como unas flechas a la derecha de tu pantalla que sirven tanto para bajar el siguiente nivel como para subir al anterior, todo eso, con desplazamiento suave y muy agradable a la vista.

Su implementación es super sencilla, mira los códigos a continuación... no necesitarás nada más.

Lo malo?
Algo tenía que tener... al parecer no funciona en versiones de Internet Explorer anteriores a la 9, pero no desesperemos, que es una beta y, tal vez, lo agreguen en futuras versiones.

Descargarlo
Es un poco arriesgado, piensa que dejarías a todos los millones de usuarios que aun no actualizaron IE a la v9 sin poder ver el efecto y las opciones no son funcionales... pero si te animas, ahí te dejo el enlace. Suerte!

Offtopic
Cómo odio IE... #hedicho

Código 1 - HTML
<script type="text/javascript" src="./javascripts/pagescroller.js"></script>
Código 2 - JAVASCRIPT
$(document).ready(function(){
    $('#main').pageScroller();
});
Código 3 - HTML
<div id="main">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018