BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

jQuery-Plugin: PageScroll (alternativa a ScrollTo)

23/AGO/2011 8.121 visitas Ver comentarios
jQuery-Plugin: PageScroll (alternativa a ScrollTo)

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

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 1 - 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 2 - HTML
<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>
...

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018