diff --git a/_assets/css/critical.scss b/_assets/css/critical.scss
index bfcaac7..d16c006 100644
--- a/_assets/css/critical.scss
+++ b/_assets/css/critical.scss
@@ -9,14 +9,40 @@
   border-bottom: 2px solid $light;
 }
 
+// back-to-top button
 #back-to-top {
   cursor: pointer;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
+  position: -webkit-sticky;
+  position: sticky;
+  bottom: 40px;
   display:none;
 }
 
+@include media-breakpoint-down(sm) {
+  #back-to-top {
+    position: fixed;
+    right: 20px;
+  }
+}
+
+@include media-breakpoint-only(md) {
+  #back-to-top {
+    margin-left: 95%;
+  }
+}
+
+@include media-breakpoint-only(lg) {
+  #back-to-top {
+    margin-left: 65%;
+  }
+}
+
+@include media-breakpoint-only(xl) {
+  #back-to-top {
+    margin-left: 60%;
+  }
+}
+
 $navbarHeight: 58px;
 
 .large {
diff --git a/_layouts/default.html b/_layouts/default.html
index a8fab72..140380a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -32,12 +32,12 @@
                 {% include sidebar.html %}
             </div>
         </div>
+        <button id="back-to-top"
+                class="btn btn-primary btn-lg"
+                title="Click to return to the start of the page" data-toggle="tooltip" data-placement="left">
+            <span class="fas fa-chevron-up"></span>
+        </button>
     </div>
-    <button id="back-to-top"
-       class="btn btn-primary btn-lg"
-       title="Click to return to the start of the page" data-toggle="tooltip" data-placement="left">
-        <span class="fas fa-chevron-up"></span>
-    </button>
 </div>
 {% include footer.html %}
 </body>