diff --git a/static/src/js/app.js b/static/src/js/app.js
index 80b9c3b..44328b6 100644
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -1,9 +1,20 @@
 var React = require('react');
 var ProjectImages = require('./components/project-images');
 
-window.scrollToElement = function(ident) {
-  $('html, body').animate({scrollTop: $(ident).offset().top}, 1000);
-}
+$(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
+  $('a[href*=#]:not([href=#])').click(function() {
+    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+      var target = $(this.hash);
+      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+      if (target.length) {
+        $('html,body').animate({
+          scrollTop: target.offset().top
+        }, 1000);
+        return false;
+      }
+    }
+  });
+});
 
 $(window).load(function(){
     $(window).trigger('scroll').trigger('resize');
diff --git a/static/src/less/style.less b/static/src/less/style.less
index 0e44219..fd9facc 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -42,6 +42,12 @@ ol , ul{
   }
 }
 
+a.no-color-change {
+  color: inherit;
+  &:hover {
+    color: inherit;
+  }
+}
 /* @end Global */
 
 /* @group Homepage */
diff --git a/templates/index.html b/templates/index.html
index a0c5299..079b174 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,7 +8,7 @@
         <img src="http://placehold.it/230x230"/>
         <h1>Hello, world!</h1>
         <p>Some random subtitle</p>
-        <p><i onClick="scrollToElement('#intro-text')" class="icon ion-chevron-down"></i></p>
+        <p><a href="#intro-text" class="no-color-change"><i class="icon ion-chevron-down"></i></a></p>
       </div>
     </div>
     <div class="container-fluid" id="intro-text">