Merge pull request #547 from VaibhavSharma24/main

Add "go back to top" arrow
railsgirls · Oct 27, 2023 · bb56bce · bb56bce
2 parents e840579 + 1bf2739
commit bb56bce
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -12,6 +12,7 @@ GEM
     ffi (1.15.5)
     forwardable-extended (2.6.0)
     google-protobuf (3.22.2-arm64-darwin)
+    google-protobuf (3.22.2-x64-mingw-ucrt)
     google-protobuf (3.22.2-x86_64-darwin)
     google-protobuf (3.22.2-x86_64-linux)
     http_parser.rb (0.8.0)
@@ -59,6 +60,8 @@ GEM
     safe_yaml (1.0.5)
     sass-embedded (1.60.0-arm64-darwin)
       google-protobuf (~> 3.21)
+    sass-embedded (1.60.0-x64-mingw-ucrt)
+      google-protobuf (~> 3.21)
     sass-embedded (1.60.0-x86_64-darwin)
       google-protobuf (~> 3.21)
     sass-embedded (1.60.0-x86_64-linux-gnu)
@@ -72,6 +75,7 @@ PLATFORMS
   arm64-darwin-20
   arm64-darwin-21
   arm64-darwin-22
+  x64-mingw-ucrt
   x86_64-darwin-20
   x86_64-linux
 

diff --git a/css/style.css b/css/style.css
@@ -527,3 +527,36 @@ nav a:hover {
   display: block;
   font-weight: bold;
 }
+.go-to-top-arrow {
+  display: block;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  font-size: 18px;
+  border: none;
+  outline: none;
+  background-color: red;
+  color: white;
+  cursor: pointer;
+  padding: 14px;
+  border-radius: 30px;
+  opacity: 0;
+  transition: all .4s;
+}
+.go-to-top-arrow:hover {
+  background-color: #555;
+}
+.go-to-top-arrow.active{
+  opacity: 99;
+}
+.arrow{
+  display: inline-block;
+  border: solid black;
+  margin-bottom: -9px;
+  margin-top: 2px;
+  border-width: 0 7px 7px 0;
+  padding: 7px;
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
diff --git a/index.html b/index.html
@@ -29,6 +29,8 @@ <h2>Guides in other languages</h2>
   </div>
 </div>
 
+<button onclick="topFunction()" class="go-to-top-arrow" title="Go to top"><div class="arrow"></div></button>
+
 <h2 id="guides">Welcome to Rails Girls!</h2>
 <p>These are the main Rails Girls workshop guides. Start here and follow the guides in order.</p>
 <ul class="guides-list">

diff --git a/js/guides.js b/js/guides.js
@@ -96,3 +96,22 @@ $(document).ready(function() {
     osLabelElement.text(osLabel);
   }
 });
+
+function topFunction() {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: "smooth",
+  });
+}
+
+window.addEventListener("scroll", function(){
+  if(window.scrollY > 100){
+    $(".go-to-top-arrow").addClass("active");
+  }else{
+    $(".go-to-top-arrow").removeClass("active");
+  }
+});
+
+
+