Merge pull request #48354 from ally1002/guide-back-to-top

Adding the button using JS and styling with CSS and Image [ #48277 ]

guides/CHANGELOG.md

@@ -1 +1,5 @@
+*   Add "back to top" button to guides
+
+    *Alysson Rosa*
+
 Please check [7-0-stable](https://github.com/rails/rails/blob/7-0-stable/guides/CHANGELOG.md) for previous changes.

guides/assets/javascripts/guides.js

@@ -44,6 +44,26 @@
       }
     });
 
+    var backToTop = createElement("a", "back-to-top");
+    backToTop.setAttribute("href", "#");
+
+    document.body.appendChild(backToTop);
+
+    backToTop.addEventListener("click", function(e) {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+
+    var toggleBackToTop = function() {
+      if (window.scrollY > 300) {
+        backToTop.classList.add("show");
+      } else {
+        backToTop.classList.remove("show");
+      }
+    }
+
+    document.addEventListener("scroll", toggleBackToTop);
+
     var guidesIndexItem   = document.querySelector("select.guides-index-item");
     var currentGuidePath  = window.location.pathname;
     guidesIndexItem.value = currentGuidePath.substring(currentGuidePath.lastIndexOf("/") + 1) || 'index.html';

guides/assets/stylesheets/main.css

@@ -264,6 +264,22 @@ body {
   background: #ccc;
 }
 
+a.back-to-top {
+  visibility: hidden;
+  position: fixed;
+  right: 1em;
+  bottom: 1em;
+  padding: 2.5em;
+  border-radius: 3em;
+  box-shadow: 2px 2px 4px 0px black;
+  background: url('../images/up-white-arrow.png') no-repeat center center, #c52f24;
+  background-size: 2em;
+}
+
+a.back-to-top.show {
+  visibility: visible;
+}
+
 #header {
   background: #c52f24 url(../images/header_tile.gif) repeat-x;
   color: #FFF;