jQuery - Scrolling browser page

jQuery - Scrolling browser page

Hi all

I have two demos of scrolling page content with jQuery.

This  one is scrolling the contents inside a container and it works as I wanted on Mac/PC

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  6. <title>untitled</title>
  7. <style type="text/css">
  8. *{margin:0;padding:0;}

  9.    div#wrap{width:600px;margin:50px auto;}
  10.    
  11.    div#header{margin-bottom:30px;}

  12.    div#header h1{font:bold 2em/1em Helvetica;color:gray;border-bottom:1px dotted gray;padding-bottom:10px;}

  13.    div#header a{font:bold 1em Helvetica;color:gray;text-decoration:none;padding:.7em;}

  14.    div#header a:hover{color:red;}

  15.    div#header ul{padding-top:10px;}

  16.    .section{height:600px;margin-bottom:0px; margin-bottom:20px;}
  17.    
  18.    .section h2{color:white; padding:20px;}

  19.    div#header ul li,.section ul li{display:inline;}
  20.    
  21.    div#content{width:600px;height:550px;overflow:hidden;position:relative;}
  22.    
  23.   #one{background:gold;}
  24.   #two{background:red;}
  25.   #three{background:gray;}
  26.   
  27. </style>
  28. </head>

  29. <body>
  30.   <div id="wrap">
  31.     <div id="header">
  32.       
  33.       <ul>
  34.         <li><a href="#" id="flora" onclick="slideContent('#one')">One</a></li>
  35.         <li><a href="#" id="beach" onclick="slideContent('#two')">Two</a></li>
  36.         <li><a href="#" id="gates" onclick="slideContent('#three')">Three</a></li>
  37.         
  38.       </ul>
  39.       
  40.     </div><!-- #header -->
  41.     <div id="content">
  42.       <div id="one" class="section"><h2>One</h2></div>
  43.       
  44.       <div id="two" class="section"><h2>Two</h2></div>
  45.       
  46.       <div id="three" class="section"><h2>Three</h2></div>
  47.             
  48.     </div><!-- #content -->
  49.   </div><!-- #wrap -->
  50.   
  51.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  52.   <script>
  53.   function slideContent(div){
  54.      var $content = $('#content');
  55.      var divPos = $('#content ' + div).position();
  56.      var scrollPosition = $content.scrollTop()+divPos.top;
  57.      $('#content').animate({scrollTop: scrollPosition}, 500);
  58.   }    
  59.   </script>
  60.   
  61. </body>


I need the same effect as above but I need to scroll the whole browser window.
I have a demo  here


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  6. <title>untitled</title>
  7. <style type="text/css">
  8. html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
  9.    small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
  10.    table, caption, tbody, tfoot, thead, tr, th, td {
  11.    margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;
  12.    }
  13.    body {line-height: 1;font-family:Helvetica, sans-serif;}
  14.    
  15.    ol, ul {list-style: none;}
  16.    
  17.    a{
  18.      text-decoration:none;
  19.    }
  20.    #pageWrap{
  21.      width:1200px;
  22.    }
  23.    #leftCol{
  24.      float:left;
  25.      width:300px;
  26.      position:fixed;
  27.    }
  28.    #rightCol{
  29.      margin-left:300px;
  30.      width:900px;
  31.      overflow:hidden;
  32.      position:relative;
  33.    }
  34.    /*
  35.    --leftCol---*/
  36.    #leftCol{
  37.      position:fixed;
  38.    }
  39.    #leftCol ul{
  40.      margin:30px 0 0 40px;
  41.    }

  42.    #leftCol li a{
  43.      display:block;
  44.      color:#b2b2b2;
  45.      padding:6px 5px;
  46.      margin-bottom:2px;
  47.      width:150px;
  48.      font-weight:bold;
  49.    }
  50.    #leftCol li a:hover{
  51.      color:red;
  52.    }
  53.    /*
  54.    --righCol----*/
  55.    .section{
  56.      margin-bottom:30px;
  57.    }
  58.    .section h2{
  59.      font-size:2em;
  60.      color:white;
  61.      padding:20px;
  62.    }
  63.    #one{
  64.      height:600px;
  65.      background:gold;
  66.    }
  67.    #two{
  68.      height:800px;
  69.      background:red;
  70.    }
  71.    #three{
  72.      height:800px;
  73.      background:gray;
  74.    }
  75.    
  76. </style>
  77. </head>

  78. <body>
  79.   <div id="pageWrap">
  80.     <div id="leftCol">
  81.       <ul>
  82.         <li><a href="#" onclick="slideContent('#one')">One</a></li>
  83.         <li><a href="#" onclick="slideContent('#two')">Two</a></li>
  84.         <li><a href="#" onclick="slideContent('#three')">Three</a></li>
  85.       </ul>
  86.     </div><!-- #nav -->
  87.     
  88.     <div id="rightCol">
  89.       <div id="one"class="section">
  90.         <h2>One</h2>
  91.       </div>  
  92.     
  93.       <div id="two" class="section">
  94.         <h2>Two</h2>
  95.       </div>
  96.       
  97.       <div id="three" class="section">
  98.         <h2>Three</h2>
  99.       </div>  
  100.       
  101.     </div><!--#rightCol-->
  102.   </div><!--#pageWrap-->
  103.   
  104.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  105.   <script>
  106.     
  107.     function slideContent(div){
  108.       var $body = $('html,body');
  109.       var divPos = $(div).position();
  110.       var scrollPosition = $body.scrollTop()+divPos.top;
  111.       $('html,body').animate({scrollTop: scrollPosition}, 500);
  112.     }
  113.     
  114.   </script>
  115.   
  116.   
  117. </body>
  118. </html>
Problem here is on the Mac the transition are jumpy and it seems to flash the
first yellow div before sliding up or down.
Testing on a PC it will slide down but won't slide up.

How can I get the whole browser window to slide up and down with a smooth transition.