diff --git a/layouts/partials/scrollTop.html b/layouts/partials/scrollTop.html
index 819970c..2dc587b 100644
--- a/layouts/partials/scrollTop.html
+++ b/layouts/partials/scrollTop.html
@@ -1,3 +1,5 @@
-<div id="scroll-top">
-    <i class="ai-chevron-up"></i>
+<div class="scroll-top">
+    <a href="#" alt="Go to top" title="Go to top">
+        <i class="ai-chevron-up"></i>
+    </a>
 </div>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index 3bdb5fe..445c9f1 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,6 +1,10 @@
 // Add event listeners
 document.addEventListener('DOMContentLoaded', function(){
-    console.log("Hello World!");
+    scrollTopVisibilityUpdate();
+});
+
+window.addEventListener('scroll', function(){
+    scrollTopVisibilityUpdate();
 });
 
 document.querySelector(".nav-toggle").addEventListener('click', function(){
@@ -14,10 +18,10 @@ document.querySelectorAll(".nav-links a").forEach(element => {
 });
 
 // Generic functions
-function toggleDisplayByClass(className){
+function toggleDisplayByClass(className, displayType){
     let items = document.getElementsByClassName(className);
     for (const item of items){
-        item.style.display = ((item.style.display == "none") ? 'block' : 'none');
+        item.style.display = ((item.style.display == "none") ? displayType : 'none');
     }
 }
 
@@ -35,4 +39,11 @@ function switchClasses(selector, class1, class2){
 function toggleNav(){
     toggleClass("nav", "open");
     switchClasses(".nav-toggle i", "ai-text-align-right", "ai-cross");
+}
+
+// scroll top visibility
+function scrollTopVisibilityUpdate(){
+    const scrollTop = document.querySelector(".scroll-top");
+    scrollTop.style.display = ((window.scrollY > 20) ? 'flex' : 'none');
+    scrollTop.style.right = ((window.scrollY > 20) ? '0' : '-55px');
 }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index f9ded67..e2836fe 100644
--- a/static/style.css
+++ b/static/style.css
@@ -420,3 +420,37 @@ nav.small img{
     }
 }
 
+
+
+/* SCROLL TOP */
+.scroll-top{
+    width: 40px;
+    height: 40px;
+    margin: 15px;
+    background: var(--primary);
+    color: var(--color);
+    border-radius: var(--baseRadius);
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    font-size: 28px;
+    transition: var(--baseTransition);
+}
+
+.scroll-top a{
+    text-decoration: none;
+    color: var(--color);
+    margin-top: 0;
+    transition: var(--baseTransition);
+}
+
+.scroll-top a:hover,
+.scroll-top a:focus{
+    margin-top: -5px;
+}
+
+.scroll-top i{
+    stroke-width: 3px;
+}
\ No newline at end of file