more changes

project/index.html

@@ -34,8 +34,8 @@
       <!-- Header -->
       <div class="header">
             <ul class="nav nav-pills pull-right">
-              <li class="active"><a href="#">Home</a></li>
-              <li><a href="">About</a></li>
+              <li><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
             </ul>
             <h1 class="text-muted">Medsafe Infographics</h1>
       </div>
@@ -189,9 +189,13 @@
             </div>
           </div>
         </div>
-
+        <div id="about">
+          <h1 class="text-muted">About</h1>
+          <p class="text-muted">
+            The FDA publishes recall records online in databases. 
+          </p>
+        </div>
       </div>
-    </div>
     <script type="text/javascript" src="static/js/graph-drawer.js"></script>
 
   </body>

project/static/js/graph-drawer.js

@@ -548,7 +548,20 @@ function resize_controller(){
 }
 window.addEventListener('resize', resize_controller); 
 $("#main-graph-container").hide();
+$("#about").hide();
 //make the main ajax call
 $( function(){
     ajax_caller();
+    $('a[href^="#"]').on('click',function (e) {
+        e.preventDefault();
+
+        var target = this.hash,
+        $target = $(target);
+
+        $('html, body').stop().animate({
+            'scrollTop': $target.offset().top
+        }, 900, 'swing', function () {
+            window.location.hash = target;
+        });
+    });
 });