Speed up development with full-stack environments for every branch.

Learn More

Smooth Scroll For One Page Website Using Javascript and JQuery

Forked from How to use the jQuery $().ready function.

3521 Runs 8325 Views 2229 Copies


atulya 2

published 3 years ago

    <!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Smooth Scroll For One page website using Javascript and JQuery</title>
    <link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
    <style type="text/css" media="all">
    body { margin:0px; padding:0px 0px 0px 0px; }
    .nav { font-family:'Hammersmith One', Arial, Helvetica, sans-serif ; width:200px; right:0px; float:right; position:fixed; padding:10px 10px 10px 0px; background-color:#000; text-align:right; color:#FFF; font-size:10px;  }
    .nav a { text-decoration:none; color:#FFF; }
    .nav ul{ padding:0px; margin:0px; }
    .nav ul li{ padding:10px 0px 0px 0px; display:block; text-align:right; }
    .nav ul li a{ color:#fff; font-size:18px; text-shadow:1px 1px 0px #666; text-decoration:none; }
    .nav ul li a:hover{ color:#CCC}
    .box-one { height:600px; background-color:#FFF; }
    .box-two { height:600px; background-color:#CCC; }
    .box-three { height:600px; background-color:#999; }
    .box-four { height:600px; background-color:#666; }
    .aboutUs-hanger { height:20px; width:20px; }
    .services-hanger{ height:20px; width:20px; } 
    .portfolio-hanger { height:20px; width:20px; }
    .contact-hanger { height:20px; width:20px;}
    <div class="menu">
    <div class="nav">
            <li><a href="#home">home</a></li>
            <li><a href="#aboutUs">about us</a></li>
            <li><a href="#portfolio">portfolio</a></li>
            <li><a href="#contact">contact us</a></li>
    	</ul><br />
        Designed Developed<br />by Atul Bhalerao<br /><a href="http://www.beparallel.com" target="_new">Beparallel</a>
    <div class="box-one"><div id="home" class="aboutUs-hanger"></div></div>
    <div class="box-two"><div id="aboutUs" class="services-hanger"></div></div>
    <div class="box-three"><div id="portfolio" class="portfolio-hanger"></div></div>
    <div class="box-four"><div id="contact" class="contact-hanger"></div></div>
    <script src="//code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/scroll.js" type="text/javascript"></script>
    Please login/signup to get access to the terminal.

    Your session has timed out.

    Dismiss (the page may not function properly).