I am developing a single-page website that uses different section IDs instead of multiple pages. It's functioning properly, but I want to implement smooth scrolling to the sections rather than just statically jumping to them on the page.
Jsfiddle: http://jsfiddle.net/schermerb/E9xuk/
#main {
width:960px;
margin:auto;
}
#header {
margin:auto;
height:75px;
width:960px;
}
.nav {
width:auto;
float:right;
font:normal 16px Futura, sans-serif;
padding:15px;
}
.nav ul li {
list-style:none;
float:left;
margin-left:15px;
color:#000;
}
#zero {
width:auto;
}
#one {
width:auto;
}
#two {
width:auto;
}
#three {
width:auto;
}
#four {
width:auto;
}
<div id="header">
<div class="nav">
<ul> <a href="#zero"><li>About</li></a>
<a href="#one"><li>Mobile</li></a>
<a href="#two"><li>Print</li></a>
<a href="#three"><li>Web</li></a>
<a href="#four"><li>Contact</li></a>
</ul>
</div>
</div>
<div id="main">
<div id="zero">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
</div>
<div id="one">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
</div>
<div id="two">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
</div>
<div id="three">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
</div>
<div id="four">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, ...
</div>
</div>