jQuery - Scrolling browser Window
Hi all
I have two demos of scrolling page content with jQuery.
This one - http://www.ttmt.org.uk/forum/2_scroll/index1.html#
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>
</html>
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - http://www.ttmt.org.uk/forum/2_scroll/#
<!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.