Smooth scroll for one page site
I'm working on a single page site that utilizes different section ids
instead of multiple pages. It's working fine, but I would like to have
scroll smoothly down to the section instead of just statically going to
the section 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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
<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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
</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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
<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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
</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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
<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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
</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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
<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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
</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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
<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, you need to be sure there isn't anything embarrassing
hidden in the middle of text. All the Lorem Ipsum generators on
the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. It uses a
dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks
reasonable. The generated Lorem Ipsum is therefore always free
from repetition, injected humour, or non-characteristic words
etc.</p>
</div>
</div>
No comments:
Post a Comment