Quizás no lo conozcas, pero utilizar jQuery.ScrollTo te permite usar uno de los mejores plugins para animar la pantalla de cualquier web, en lugar de usar los aburridos y ya desfasados anchors de HTML. Se trata de un software libre y de código abierto, que ofrece una serie de funcionalidades basadas en JavaScript.
Antes de utilizar jQuery debes de saber que éste se encuentra bajo licencia MIT y Licencia Pública General de GNU v2 y que fue creada por John Resig con el objetivo de simplificar la manera que tenemos de interactuar con los documentos HTML, agregar interacciones a la página web gracias a la técnica AJAX, realizar eventos y animaciones e incluso manipular el árbol DOM.
Los beneficios en el diseño web que ofrece jQuery son infinitos, ya que puedes utilizarlo en proyectos libres y particulares. Permite realizar efectos modernos y animaciones de calidad y personalizadas, soporta extensiones, las modificaciones del árbol DOM incluye soporte para CSS 1-3 y un plugin básico de XPath, la manipulación de la hoja de estilos CSS y sirve tanto para obtener información del navegador, como para operar con objetos y vectores o realizar funciones para rutinas comunes.
Utilizar jQuery es posible multitud de navegadores como Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.5, permitiendo lograr grandes resultados en menos tiempo y espacio, además su uso es mucho más fácil que muchos sus competidores. Permite agregar plugins fácilmente y la librería siempre cuenta con un soporte constante y rápido. Finalmente una de sus grandes ventajas sobre competidores como CSS y Flash, es su excelente integración con AJAX.
Y ¿cómo podemos hacer para agregar el código jQuery para animar nuestro anchor? De la siguiente manera:
| $(«document»).ready(function(){$(«.top»).click(function() {
var elementClicked = $(this).attr(«href»); var destination = $(«.»+elementClicked).offset().top; $(«html:not(:animated),body:not(:animated)»).animate({ scrollTop: destination-20}, 500 ); return false; }); }); |