Cómo crear un efecto de desplazamiento de contenido con jQuery

En el mundo del HTML hay dos formas muy populares de desplazarse con los links, una es por medio de páginas, es decir, ir de una página a otra página, como lo hacemos habitualmente y es la más usada en general, y la otra que es por medio de links desplazarse al contenido de una sola página, es decir, movernos a través de la (se supone que debe ser extensa) página para ir leyendo o viendo el contenido por secciones sin tener que bajar el scroll manualmente.

Después del salto vamos a ver cómo crear un efecto de desplazamiento de contenido con jQuery, para hacer de esa acción todo un places al agregarle un poco de movimiento.

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.

 

Sitio: trevordavis.net/blog/jquery-one-page-navigation-plugin

Demo: trevordavis.net/play/jquery-one-page-nav