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

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 •
jquery scrollto • scrollto • scrollto jquery plugin • jquery scrollby • alternativa a scrollto • jquery plugin scrollTo • anclas jquery • jquery scrollto plugin • alternativa jqtransform • jquery localscroll • alternativas a scrollto • plugin scrollto de jquery • scrollto menu • Cómo cargar contenido externo a un div con jQuery • a href=#home>home</a></li> menu en movimiento • Fade Out Bottom scroll jquery • jquery probar easing • navegacion pagescroll jquery • anclaje en html5 • jquery ancla • pagescroll • jquery css scroll with easing • alternativas jquery collapser • scrollto plugin • jquery scrollto xhtml chrome • jquery scrolltop android • easing en anclas • jquery efecto scroll ancla dentro de div • jquery scrollto android • jwuery scrool hacia la derecha • scrollTo opciones • a scrollto • jquery scrollto plugin 2011 • menus internos jquery • calendario jquery php eventos • jquery localscroll y capa siempre visible • animación div con jquery easing • como usar scrollTo jqery • fadeIn duration easing jquery • jquery anclas links javascript • html5 acordeon por anclas • codigos con scrollto • pot navigate easing jquery • descargar archivo con anclas jquery • jquery anclaje con nombre • sitios con ancla en jquery • free sitio web con anclas easy out • alternativas a jquery y flash • anclas jquery download • a#scroll to • anclajes siempre visibles jquery • navegar con jquery easing • desplazar jquery anclar enlaces izquierda derecha • jquery event scroll easing • anclas con fade • anclas en jquery horizontal • jquery scroll hacia la derecha • jquery utilizar href • scrollto y anclas • anclas con fade out • horizontal scroll using jquery scrollto menu • plugin para anclas en html • evitar desplazamiento ancla jquer • anclas jquery plugin • anclas easing css • anclas laterales html jquery • scroll sencillo jquery • scroll ancla • ipad jquery scrollto • $(#div) scroll( • identificar baja scroll jquery • programar jquery scrollto horizontal • navegacion easing en jquery • jquery anclaje de scrollbar • jquery scroll ease • un href archivo jquery • scroll desplazamiento vertical jquery scroo • menu efecto con anclas jquery • scroll to jquery plugin • easing entre enlaces web • anclas de navegacion vertical en jquery • navegacion con easing jquery • scrollto plugin jquery • scroll jquery con anclas • menu easing ancla • jquery anclaje • llevar pagina con ease jquery • scrolling jquery div vertical html5 • acordeon con scroll dentro en jquery • ancla jquery en ipad • efecto ancla en menu en jquery • javascrip anclas easing • jquery easing anclaje • movimiento diagonal jquery • anclaje html jquery • ancla jquery 2012 • paginacion jquery y anclas • jquery alternativa scrollto • menu con anclajes jquery • efecto fadeIn al recargar div jquery •
acordeón actionscript ajax alert ampliar imágenes android antes y después as audio aumentar letra barra desplazamiento blur bordes redondeados botón derecho calcular distancia calendario chart chrome collapse columnas combobox contar caracteres contar followers contextual css cu3er códigos date-picker descargas desenfoque desplazamiento dhtml disminuir letra dominios editor enlaces enlaces externos error 404 estrellitas expander fade fecha file upload filtrar contenido flash font size formulario formularios fotografías fpdf frames framework galería gmail google google docs gratis headers htaccess html html5 iconos ie6 igualar columnas inyección cabeceras ipad iphone javascript jquery jquery ui jquery,jquery ui,datepicker,calendario,eventos jquery,jquery ui,select múltiple,option json lavalamp librería librerías lightbox limitar caracteres link links lista listas listbox mail injection maquetación marcos mensajes menu menú menú lateral miniaturas mootools mouseover mp3 multinivel mysql máscaras móvil navegadores no conflict notas adhesivas notificaciones oauth ofuscador ordenar organigrama pdf php phpmailer picker player playlist plugin png portfolio preview reproductor reproductor de música safari scroll scrollto select selector de color sistema de votación slider snippets spam star rating subir ficheros switch mode tablas tamaño texto target blank textarea thumbnail tooltip twitter usuarios activos validacion validación validate videos vtip wap webkit www wysiwyg youtube zoom
Hay 11 usuario/s en esta página