Scrolling Content ?

Scrolling Content ?

Scrolling Page

Hi all

I have this  Demo where the nav on the side scrolls the div containing the content
It works ok but the the first yellow div flashs up when the scrolling is upwards

From One to Two and One to Three the scrolling is fine. From Three to One there is a 
flash of the first yellow div.

Can anyone help with this it's driving me mad.

Any help would be greatly appreciated. 

  1. <!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>