SummArg | Cursos y recursos para webmasters

27/04/2012

Animar el scroll de enlaces dentro de la misma página con jQuery

El efecto animado de scroll puede servir para que los usuarios menos familiarizados con la web entiendan que están navegando entre diferentes anchors dentro de la misma página. Para colocar anclas a difentes secciones dentro de la misma página primero colocamos los hipervínculos:

<a href="#jubilaciones" >Jubilaci&oacute;nes</a>
<a href="#pensiones">Pensiones</a>
<a href="#otros">Otros</a>

Y luego en los títulos a las diferentes secciones podemos anteponer:

<a name="jubilaciones" id="jubilaciones"></a>
<a name="pensiones" id="pensiones"></a>
<a name="otros" id="otros"></a>

Con estos pasos tenemos la base para que funcionen los links internos utilizando sólo HTML. Ahora coloquemos la clase “scroll” a los links del siguiente modo.

<a href="#jubilaciones" class="scroll">Jubilaci&oacute;nes</a>
<a href="#pensiones" class="scroll">Pensiones</a>
<a href="#otros" class="scroll">Otros</a>

Y al final del documento, antes del cierre de la etiqueta </body>, linkeamos jQuery y colocamos el script.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".scroll").click(function(event){
 event.preventDefault();
 var offset = $($(this).attr('href')).offset().top;
 $('html, body').animate({scrollTop:offset}, 500);
 });
});
</script>

Dejar un comentario

  1. Buenas donde esta el ejemplo de muestra de esta web?

  2. Excelente me ha servido 😀 gracias

Dejar un comentario