Q:

Making a div element programmatically and vertically scroll within another div element

I want to showcase a mobile-friendly layout. To do that, I have a page with a big iPhone in it. In the screen area, I want my layout to appear and automatically scroll down vertically then scroll up to initial point.
I found a vertical carousel for that, but I'd like it to be automatic. Is there a simple way to achieve that?

A:

As you didn't give the code, I made my own prototype. Tweak this code to fit your needs, if you add code I can do it for you. Here is the basic idea.
<body style="background: grey;">
    <div style="width: 400px; height: 800px; background: white; overflow-y: hidden;" id="page">
        <div style="height: 2000px; width: 385px;">
            <div style="background: red; height: 400px; width: 400px;"></div>
            <div style="background: blue; height: 400px; width: 400px;"></div>
            <div style="background: green; height: 400px; width: 400px;"></div>
            <div style="background: yellow; height: 400px; width: 400px;"></div>
            <div style="background: purple; height: 400px; width: 400px;"></div>
        </div>
    </div>
    <script>
        var page = document.getElementById('page');
        var times = 0;
        window.setInterval(function(){
            times++;
            page.scrollTop = times;
            if(times == 1200){
                window.clearInterval();
            }
        }, 5);
    </script>
</body>

If you want it to come back up after completing just add page.scrollTop = 0 at the end. If you want to run it again set times to 0 and run that interval again by putting it into a function, right after clearInterval();. 
I hope I helped! If there's something you're not clear about just comment below.
Finished one: jsFiddle

