tags:

views:

1201

answers:

2

The slideDown applied to a div does the slideDown but doesn't scroll the page down and the div slided down div remains hidden from view. Is there a way to scroll the page down as well so the user can view the div?

+5  A: 

Quick demo here

Basically all you need is

 $('html, body').animate({ 
      scrollTop: $('#yourDiv').offset().top 
  }, 3000);
redsquare
Yeah that seems to work. But if clicked again it gives the page a jerk and tries to animate again. Is there a way to check if the div is already visible and not animate?
Daud
JimmyP helped below!
redsquare
but maybe better as another Q!
redsquare
+1  A: 
$.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);
}
J-P
+1 Wow.. that is the most readable JS I ever seen!
Fabiano PS