2009-01-23 11 views

Respuesta

22

demostración rápida here

Básicamente todo lo que necesita es

$('html, body').animate({ 
     scrollTop: $('#yourDiv').offset().top 
    }, 3000); 
+0

Sí que parece funcionar. Pero si vuelve a hacer clic, le da un tirón a la página e intenta animarlo de nuevo. ¿Hay alguna manera de verificar si el div ya es visible y no animado? –

+0

JimmyP ayudó más abajo! – redsquare

+0

pero tal vez mejor como otra Q! – redsquare

8
$.extend($.expr[':'],{ 
    inView: function(a) { 
     var st = (document.documentElement.scrollTop || document.body.scrollTop), 
      ot = $(a).offset().top, 
      wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height(); 
     return ot > st && ($(a).height() + ot) < (st + wh); 
    } 
}); 

if ($('#whatever').is(':not(:inView)')) { 
    $('html,body').animate({ 
     scrollTop: $('#whatever').offset().top 
    }, 3000); 
} 
+2

+1 Wow ... ¡esa es la JS más legible que he visto! –

+0

Puede que le interese un plugin genérico de jQuery que hace un desplazamiento animado (y tampoco se desplaza cuando los elementos están visibles) http://erraticdev.blogspot.com/2011/02/jquery-scroll-into-view- plugin-with.html Es similar al plugin * scrollTo * pero es más simple (por lo tanto más rápido) –

Cuestiones relacionadas