Smooth page scroll script for mobile device using 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!.

Blog

Page scroll for ipad-android device using javascript-jquery

Leave a Reply Cancel reply