Question

I am building a mobile website that has a hidden div that when a button is clicked, things happen that reveal this div and stretch the page.

In essence it is a “receipt” of sorts, I have three divs sitting on top of each other that make this up, the top div contains the top portion of my receipt (a hole with a tiny bit of paper coming out). The middle div is hidden and is the body of the receipt that is revealed on click. The bottom div is the bottom portion of the receipt containing the branding for the company (logo and such) that is always visible.

So, when the user first visits the site they see the Top and Bottom divs sitting together looking like a little piece of receipt hanging out with the logo and blah blah blah…

What I am needing help with is that the “receipt” sits about 30px from the bottom of the viewport, and when it is expanded the window doesn’t move with it. What can I do in order to have the page move with this div when the middle div opens and pushes it down?

Answer 1

Yes. just use scrollTop as in below .

    $(document).ready(function() {

    $('element').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});