How to create scrollbar in jQuery-mobile

Question

• What I want to do:

Is creating a scrollbar in jquery mobile.

• What I have :

I have a body & a scroll bar like this:

• How I want to do it :

There are three divs (pink one,red one & grey one) and I have added a class to the red div named: "scroll"
I have created two events: swipe up & swipe down, and they are used like this:

$('.scroll').on('swipedown',function(){alert("swipedown detected");} );
$('.scroll').on('swipeup',function(){alert("swipeup detected");} );

Now I want to write some codes that instead of alerting "swipe detected" they really scroll down or up the page.

• What I have written so far :

I really tried to give you a JSFiddle link, but some errors happened.
But in this link you can see the demo , and view the source code.

Anyway how can I write a function that scrolls up or down the page?