jQuery-Plugin: PageScroll (alternativa a ScrollTo)
Escrito por Martín Iglesias y leído 3,471 veces. Ver comentarios
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
$(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');
}
});
}); <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:
Diseñador web freelance en Coruña Galicia | Martin Iglesias
Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.
Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!
Artículos relacionados:
- 20 plugins para jQuery que no pueden faltar en tus webs
- Excelente listado de 240 plugins para jquery
- Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
- jQuery Validate: la rápida validación de formularios.
- Calendario en PHP con eventos, jQuery y vTip
- Formularios web con jQuery Validate y envío por phpmailer y gmail
- 18 plugins jquery que no pueden faltar en tu web parte 2
Este artículo ha salido en un total de 95 búsquedas desde Google en sus 641 días de vida y ha sido visto 3,471 veces.
