diff --git a/assets/style-refractored.scss b/assets/style-refractored.scss
index 226bc44..0ddf17a 100644
--- a/assets/style-refractored.scss
+++ b/assets/style-refractored.scss
@@ -311,4 +311,29 @@ hr {
         color:#6c757d !important;
     } 
 }
-/* END - footer*/
\ No newline at end of file
+/* END - footer*/
+
+
+/* back-to-top button */
+#back-top-button {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px; 
+    z-index: 99;
+
+    border: none;
+    outline: none;
+
+    background-color: #d1d1d1; /* Set a background color */
+    color: #2157ad; /* Text color */
+
+    opacity: 0.85;
+
+    cursor: pointer; /* Add a mouse pointer on hover */
+
+    padding: 12px;
+    border-radius: 10px; 
+    font-size: 20px;
+}
+  
diff --git a/layouts/partials/after-content-js.html b/layouts/partials/after-content-js.html
index 1ee3f17..211ec72 100644
--- a/layouts/partials/after-content-js.html
+++ b/layouts/partials/after-content-js.html
@@ -26,4 +26,24 @@
         pangu.autoSpacingPage();
     });
 </script>
-{{ end }}
\ No newline at end of file
+{{ end }}
+
+
+{{/*  back-top- button */}}
+<button id="back-top-button"><i class="fas fa-chevron-up"></i></button>
+<script>
+    window.onscroll = function() {scrollFunction()};
+    function scrollFunction() {
+        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
+            $("#back-top-button").fadeIn();
+        } else {
+            $("#back-top-button").fadeOut();
+        }
+    }
+
+
+    $( "#back-top-button" ).click(function() {
+        $("html, body").animate({scrollTop: 0}, 500);
+    });
+</script>
+