Siempre estoy escribiendo sobre lo sencillo que es implementar una galería de imágenes, tooltips, menús y demás con jQuery. Hoy voy a escribir sobre lo sencillo que es desplazar de contenido con un plugin jQuery.
Se trata de jQuery One Page Navigatio Plugin, una solución para crear enlaces a distintas partes del contenido de una página web.
Implementación
Primero necesitamos enlazar las bibliotecas Javascript:
<script src="jquery.js"></script> <script src="jquery.scrollTo.js"></script> <script src="jquery.nav.min.js"></script>
Segundo crear la estructura HTML que luego luego paginaremos:
El menú:
<ul id="nav"> <li class="current"><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li"><a href="#section-3">Section 3</a></li> </ul>
El contenido a desplazar:
<div id="section-1"> <strong>Section 1</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-2"> <strong>Section 2</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-3"> <strong>Section 3</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
El plugin además ofrece opciones para personalizar le comportamiento, por ejemplo:
- currentClass: ‘current’ – Define el elemento seleccionado por defecto.
- scrollSpeed: 750 – Define la velocidad de desplazamiento.
jQuery One Page Navigation Plugin
Sitio: trevordavis.net/blog/jquery-one-page-navigation-plugin
Demo: trevordavis.net/play/jquery-one-page-nav