Menú para navegación de página con Scroll mediante jQuery

Este ejemplo en jQuery puede ser muy útil cuando necesitamos crear un menú de navegación para páginas con mucho texto o contenido, ya que permite hacer scroll automático de la página a través de las secciones. Cuando hagamos clic en cada sección, esta quedará seleccionada automáticamente y se desplazará.

El plugin, que como se mencionó utiliza la librería jQuery, es completamente gratuito y de libre uso ( Open source con licencia MIT y GPL), y además muy fácil de implementar.

Descripción general.

En el fichero de descarga se incluyen varios archivos, entre ellos la librería jQuery y el fichero de demostración index.htm. (También puedes probarlo pulsando en este enlace.)

Funcionamiento e instalación:

La instalación e implementación es muy simple.

Cada item de menú es un elemento de lista UL/LI. el ID de la lista deberá establecerce con el valor Nav, por ejemplo:

<ul id="nav"> <li class="current"><a href="#section-1">sección 1</a></li> <li><a href="#section-2">sección 2</a></li> <li><a href="#section-3">sección 3</a></li> <li><a href="#section-4">sección 4</a></li> <li><a href="#section-5">sección 5</a></li> </ul>

Luego cada párrafo o sección de la página que corresponderá a las secciones definidas anteriormente, tendrán que tener en su atributo Class el valor section, y en el ID tendremos que colocar el enlace establecido en el atributo HREF de cada item del menú, por ejemplo:

<div class="section" id="section-2"> Texto o cualquier otro contenido de esta sección. </div>

Archivos dependientes.

En la sección Head de la página necesitarás colocar los siguientes archivos:

• jquery.js
• jquery.nav.js
• jquery.nav.min.js
• jquery.scrollTo.js

Modificar la velocidad del scroll.

Para configurar la velocidad de desplazamiento automático, lo puedes hacer abriendo el archivo javascript jquery.nav.js con el bloc de notas o tu editor de páginas web.

Dentro de este fichero, al final de todo, encontrarás el siguiente código fuente o bloque:

// default options $.fn.onePageNav.defaults = { currentClass: 'current', changeHash: false, scrollSpeed: 750 };

Allí simplemente modifica el valor 750 de la variable scrollSpeed con el que necesites utilizar.

Requiere : librería jQuery