jQuery-Plugin: PageScroll (alternativa a ScrollTo) Blog de Martin Iglesias .eu

jQuery-Plugin: PageScroll (alternativa a ScrollTo)

Escrito por: Martín el 23-08-2011 09:00:02 y leído 1856 veces

jQuery-Plugin: PageScroll (alternativa a ScrollTo)

Este plugin es una alternativa al ya conocido ScrollTo, que lo que hace es que al presionar sobre una de las opciones de un menú con enlaces internos, éste desplace la página (o haga scroll) hasta el div correspondiente con una animación.

Además, tiene como ventaja, un peso muy reducido y varias opciones personalizables. Aun no lo he probado, pero desde ya no me gusta que muestre un mensaje que pone "Scrolling" a la derecha de la pantalla, pero imagino que se podrá configurar.

Hay una demo en la web de su autor por lo que no vale la pena reproducirla en mi web. Su código es muy sencillo y con pocas líneas lo tendremos funcionando.

Resumiendo su uso, necesitas que el menú enlace al ancla #div y tus div deberán llevar por id el mismo nombre que el href de tus enlaces, es decir href="#micapa" y luego div id="micapa".

En event, podrás configurar sobre que evento actúa, por defecto, está sobre el mouseover.

Recuerda que si usas easing para la animación, deberás meter además de jquery, el archivo easing.js que consigues en jquery.com

Código JAVASCRIPT

$(document).ready(function() {
                $('a[href^="#"]').pageScroll({
                    offset: 100,
                    speed: 1400,
                    easing: 'easeInOutExpo',
                    event: 'mouseover',
                    onScrollStart: function(el) {
                        $('#scroll-indicator').fadeIn('fast');
                        $('h1').css('color', '#556');
                        $(el.attr('href')).css('color', 'royalblue');
                    },
                    onScrollFinish: function(el) {
                        $('#scroll-indicator').fadeOut('fast');
                    }


                });
            });

Código XHTML

        <ul id="navigation">
            <li><a class="current" href="#home">home</a></li>
            <li><a href="#about">about us</a></li>
            <li><a href="#contact">contact us</a></li>
            <li><a href="http://www.google.com">google</a></li>
            <li><a href="#stuff">stuff</a></li>
        </ul>

        <p id="scroll-indicator">Scrolling...</p> <!-- ESTO NO ME GUSTA :) -->

        <h1 id="home" class="first">This is a test</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
...

Categorías: Scroll • Jquery • Plugin • ScrollTo •