Transiciones/Desplazamientos dentro de una misma página (jQuery)

En muchas páginas es común tener enlaces que nos llevan a distintas partes dentro de ésta, como por ejemplo hacer clic en el enlace de un índice para llevarlos a la posición de la página en donde comienza la sección o estar en la parte inferior y encontrar un enlace que nos desplaza (lleva) hacia arriba. Con Smooth Anchors podemos hacer esto mismo pero con un desplazamiento suave del texto y de una forma cómoda, sencilla y estéticamente agradable.

Lo primero que haremos será incluir las librerías JavaScript necesarias para ello; jQuery y Smooth Anchors.

...
    <script language="JavaScript" src="js/jquery.js"></script>
    <script language="JavaScript" src="js/jquery.smoothanchors.js"></script>
...

El siguiente paso será inicializar el plugin añadiendo a la cabecera de nuestro código fuente las siguientes líneas:

...
    <script language="JavaScript">
        $(document).ready(function() {
            // $.smoothAnchors(velocidad [, tipoDeEfecto [, redirección]])
            // -> velocidad = "slow" | "normal" | "fast"
            // -> tipoDeEfecto = "linear" | "swing"
            // -> redirección = true | false
            $.smoothAnchors("normal", "swing", false);
        });
    </script>
...

Mediante el código anterior estamos indicando que cualquier tipo de enlace que nos dirija a una sección de la misma página deberá realizar el scrolling utilizando el plugin Smooth Anchors. Además, la velocidad la inicializaremos a normal.

Finalmente, el último paso será, evidentemente, crear los enlaces pertinentes dentro de nuestra página web. Por ejemplo, de la siguiente forma:

...
    <a href="#seccion01">Secci&oacute;n 01</a>
    <a href="#seccion02">Secci&oacute;n 02</a>
    ...
    <a name="seccion01">Secci&oacute;n 01</a><p>Texto de la primera secci&oacute;n</p>
    <a name="seccion02">Secci&oacute;n 02</a><p>Texto de la segunda secci&oacute;n</p>
...

Advertisement