In the following steps, we're going to create our smooth-scrolling, one pager animation that will animate to different sections of the content in our page:
First, let's start by making a new file using our template
smooth-scrolling.html
, and then saving it in ourjquery-animation
folder.Second, we're going to add in our jQuery UI library again by inserting the following code directly below our jQuery library (the new code has been highlighted):
<script src="js/jquery.js"></script> <script src="js/jquery-ui.min.js"></script>
Next, we need to add the following CSS code to a new file named
smooth-scrolling.css
and link it insmooth-scrolling.html
:body, html { margin:0; padding:0; } body {background:#CCC;} nav { width:100%; position:fixed; top:0; padding:10px 0; text-align:center; outline:1px dotted #FFF; background:#EEE; background-color:rgba(255, 255, 255, 0.9); } nav a { color:#222; margin...