Page scroll for ipad-android device using javascript-jquery

()

In the last post we had written about swipe detection using jQuery mobile.

We are really inspired by iPad page scroll UI, it looks so smooth and elegant. So, we decided to write something for a page scroll for iPad/android device using JavaScript/jQuery.

The logic is quiet simple, really, you will have the inner references for a DIV element (or any DOM element) to which you can scroll your lengthy page into ,just dock the DOM on top of page but with help of smooth transition using jquery, which would mimic ipad like page scroll.

Remember to include jquery plugin , jquery mobile plugin and css.

NOTE: The present code and scripts gives only an idea of the development or logic and does not concentrate on great design and validation

Here is the basic HTML

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta content="width=device-width, minimum-scale=1 name="viewport"></meta>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="format-detection" content="scroll" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>ipad App - framework</title>
  <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
  <link type="text/css" href="css/ipad.css" rel="stylesheet" />    
  <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
  <script type="text/javascript" src="js/default.js"></script>
</head>
<body>
  <div id="p_nm" class="pag"></div>
  <div id="wrapper">
    <div id="page1" class="page"></div>
    <div id="page2" class="page"></div>
    <div id="page3" class="page"></div>
    <div id="page4" class="page"></div>
    <div id="page5" class="page"></div>
  </div>
  
  <div id="link_index" class="link">
    <a href="#" onclick="scroll_section('page1')">page1</a>
    <a href="#" onclick="scroll_section('page2')">page2</a>
    <a href="#" onclick="scroll_section('page3')">page3</a>
    <a href="#" onclick="scroll_section('page4')">page4</a>
    <a href="#" onclick="scroll_section('page5')">page5</a>
  </div>
</body>
</html>

CSS

.page{  
  width:720px; 
  height:1000px;
  margin:5px; 
  border:#CCCCCC solid 1px;
}
@media only screen and (width:device-width) and (orientation:portrait){
  .page{  
    width:720px; 
    height:1000px;
    margin:5px; 
    border:#CCCCCC solid 1px;  
  }
}
@media only screen and (width:device-width) and (orientation:landscape){
  .page{  
    width:950px; 
    height:700px;
    margin:5px; 
    border:#CCCCCC solid 1px; 
  }
}

.pag{ 
  top:0px; 
  width:250px; 
  height:50px; 
  left:45%; 
  position:fixed;
  }

jQuery

function scroll_section(ide) 
{ 
  $('#p_nm').html("Page"+ide).animate({top:"15px"},500); // div to show which page u have scrolled into 
  $('html,body').animate({scrollTop: $("#"+ide).offset().top},500); 
}

subscription and comments are welcome!.

Hit Like if this article was useful to you!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a Reply

Your email address will not be published. Required fields are marked *