April 24, 201016 yr Hello! I'm interested in using a scrolling navigation on my portfolio site but as i'm new to javascript and jQuery i'd appreciate some help!! I have coded this simple example webpage with the theory of the naviagtion automatically scrolling to each anchor on the page. I have read the scrollTo jQuery plugin by Ariel Flesler but that still confuses me, sorry if i sound thick, i'm sure its simple enough. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery scrollTo test page</title> <style type="text/css"> * { margin:0; padding:0; } body { font-family: Verdana, Serif; } #header { width: 100%; height: 60px; background-color: red; position:fixed; top: 0; left: 0; } #header-content { width: 400px; margin: 0 auto; text-align: left; } #content { margin: 0 auto; width:400px; } #content p { padding-bottom:80px; } h2#about { padding-top:80px; } #footer { background-color: blue; height:500px; } </style> <!--[if IE 6]><link href="ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <script type="text/javascript" src="jquery-1.4.2.js"></script> </head> <body id="home"> <div id="header"> <div id="header-content"> <ul id="nav"> <li><a href="#about">about</a></li> <li><a href="#work">work</a></li> <li><a href="#contact">contact</a></li> </ul> </div> <!-- // header-content div --> </div> <!-- // header div --> <div id="content"> <h2 id="about">about</h2> <p>If you import swatches, you may introduce quite a few RGB colors into your four-color print publication file. To quickly convert them, download and run the free RGB to CMYK script from InDesign scripting master Dave Saunders. Note that the colors may shift significantly because many RGB colors can't be reproduced in CMYK. Also, the printed colors may not match what you see on screen. It's always better to pick CMYK colors from a current printed swatch book.</p> <h2 id="work">work</h2> <p>If you import swatches, you may introduce quite a few RGB colors into your four-color print publication file. To quickly convert them, download and run the free RGB to CMYK script from InDesign scripting master Dave Saunders. Note that the colors may shift significantly because many RGB colors can't be reproduced in CMYK. Also, the printed colors may not match what you see on screen. It's always better to pick CMYK colors from a current printed swatch book.</p> <h2 id="contact">contact</h2> <p>If you import swatches, you may introduce quite a few RGB colors into your four-color print publication file. To quickly convert them, download and run the free RGB to CMYK script from InDesign scripting master Dave Saunders. Note that the colors may shift significantly because many RGB colors can't be reproduced in CMYK. Also, the printed colors may not match what you see on screen. It's always better to pick CMYK colors from a current printed swatch book.</p> </div> <!-- // content div --> <div id="footer"></div> </body> </html> If someone could show me the right way to do this id be so greatful! Thanks, Rob
Create an account or sign in to comment