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
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>untitled</title>
- <style type="text/css">
- *{margin:0;padding:0;}
- div#wrap{width:600px;margin:50px auto;}
-
- div#header{margin-bottom:30px;}
- div#header h1{font:bold 2em/1em Helvetica;color:gray;border-bottom:1px dotted gray;padding-bottom:10px;}
- div#header a{font:bold 1em Helvetica;color:gray;text-decoration:none;padding:.7em;}
- div#header a:hover{color:red;}
- div#header ul{padding-top:10px;}
- .section{height:600px;margin-bottom:0px; margin-bottom:20px;}
-
- .section h2{color:white; padding:20px;}
- div#header ul li,.section ul li{display:inline;}
-
- div#content{width:600px;height:550px;overflow:hidden;position:relative;}
-
- #one{background:gold;}
- #two{background:red;}
- #three{background:gray;}
-
- </style>
- </head>
- <body>
- <div id="wrap">
- <div id="header">
-
- <ul>
- <li><a href="#" id="flora" onclick="slideContent('#one')">One</a></li>
- <li><a href="#" id="beach" onclick="slideContent('#two')">Two</a></li>
- <li><a href="#" id="gates" onclick="slideContent('#three')">Three</a></li>
-
- </ul>
-
- </div><!-- #header -->
- <div id="content">
- <div id="one" class="section"><h2>One</h2></div>
-
- <div id="two" class="section"><h2>Two</h2></div>
-
- <div id="three" class="section"><h2>Three</h2></div>
-
- </div><!-- #content -->
- </div><!-- #wrap -->
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
- <script>
- function slideContent(div){
- var $content = $('#content');
- var divPos = $('#content ' + div).position();
- var scrollPosition = $content.scrollTop()+divPos.top;
- $('#content').animate({scrollTop: scrollPosition}, 500);
- }
- </script>
-
- </body>
I need the same effect as above but I need to scroll the whole browser window.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>untitled</title>
- <style type="text/css">
- 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,
- small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td {
- margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;
- }
- body {line-height: 1;font-family:Helvetica, sans-serif;}
-
- ol, ul {list-style: none;}
-
- a{
- text-decoration:none;
- }
- #pageWrap{
- width:1200px;
- }
- #leftCol{
- float:left;
- width:300px;
- position:fixed;
- }
- #rightCol{
- margin-left:300px;
- width:900px;
- overflow:hidden;
- position:relative;
- }
- /*
- --leftCol---*/
- #leftCol{
- position:fixed;
- }
- #leftCol ul{
- margin:30px 0 0 40px;
- }
- #leftCol li a{
- display:block;
- color:#b2b2b2;
- padding:6px 5px;
- margin-bottom:2px;
- width:150px;
- font-weight:bold;
- }
- #leftCol li a:hover{
- color:red;
- }
- /*
- --righCol----*/
- .section{
- margin-bottom:30px;
- }
- .section h2{
- font-size:2em;
- color:white;
- padding:20px;
- }
- #one{
- height:600px;
- background:gold;
- }
- #two{
- height:800px;
- background:red;
- }
- #three{
- height:800px;
- background:gray;
- }
-
- </style>
- </head>
- <body>
- <div id="pageWrap">
- <div id="leftCol">
- <ul>
- <li><a href="#" onclick="slideContent('#one')">One</a></li>
- <li><a href="#" onclick="slideContent('#two')">Two</a></li>
- <li><a href="#" onclick="slideContent('#three')">Three</a></li>
- </ul>
- </div><!-- #nav -->
-
- <div id="rightCol">
- <div id="one"class="section">
- <h2>One</h2>
- </div>
-
- <div id="two" class="section">
- <h2>Two</h2>
- </div>
-
- <div id="three" class="section">
- <h2>Three</h2>
- </div>
-
- </div><!--#rightCol-->
- </div><!--#pageWrap-->
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
- <script>
-
- function slideContent(div){
- var $body = $('html,body');
- var divPos = $(div).position();
- var scrollPosition = $body.scrollTop()+divPos.top;
- $('html,body').animate({scrollTop: scrollPosition}, 500);
- }
-
- </script>
-
-
- </body>
- </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.