Question

I have a DIV that is several hundred pixels in height. When a user clicks a button, I would like to ensure they can view the very top when the Ajax returns a second view from the server.

How can I make it so it will only scroll to the top of the DIV if the top currently isn’t in view?

For example, if a user hasn’t scrolled at all on the page, has a high resolution and can view the entire DIV, I don’t want any scrolling to occur. For users running lower resolutions, I would like to make sure they are sent to the top of the DIV so they can see it.

Answer 1

You can do a check with a function like so

Live Demo

function checkIfInView(element){
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view
        $('html,body').animate({scrollTop: offset}, 1000);
        return false;
    }
   return true;
}​

You would call it after your ajax function on the div you want to check like so

checkIfInView($('#testdiv'));