From c6095dcd581deb4d2ed80a6de2786158ad82ca81 Mon Sep 17 00:00:00 2001
From: Matheus Maydana <mattmaydana@gmail.com>
Date: Tue, 12 Mar 2024 23:08:25 -0300
Subject: [PATCH] feat:(Docs) added button when click scroll to top

In my opinion, this feature is very useful because the documentation on some pages has a lot of content and when necessary, you need to scroll a lot to go back to the top.
---
 .../views/components/i/scrolltotop.blade.php  | 42 +++++++++++++++++++
 resources/views/docs.blade.php                |  1 +
 2 files changed, 43 insertions(+)
 create mode 100644 resources/views/components/i/scrolltotop.blade.php

diff --git a/resources/views/components/i/scrolltotop.blade.php b/resources/views/components/i/scrolltotop.blade.php
new file mode 100644
index 0000000..4c28ec0
--- /dev/null
+++ b/resources/views/components/i/scrolltotop.blade.php
@@ -0,0 +1,42 @@
+
+<style>
+    #scrollToTopBtn {
+      display: none;
+      position: fixed;
+      bottom: 20px;
+      right: 30vw;
+      z-index: 99;
+      background-color: #303030;
+      color: white;
+      border: none;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      font-size: 20px;
+      transition: all 0.3s ease; /* Adicionando transição para suavizar o movimento */
+    }
+
+    #scrollToTopBtn:active {
+      transform: translateY(5px); /* Mover para baixo quando clicado */
+    }
+</style>
+<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">↑</button>
+
+<script>    
+    window.scrollFunction = f => {
+      var scrollToTopBtn = document.getElementById("scrollToTopBtn");
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        scrollToTopBtn.style.display = "block";
+      } else {
+        scrollToTopBtn.style.display = "none";
+      }
+    };
+
+    window.onscroll = f => scrollFunction();
+    
+    window.scrollToTop = f => {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    };
+    </script>
\ No newline at end of file
diff --git a/resources/views/docs.blade.php b/resources/views/docs.blade.php
index 9fe7faf..7eb6dfd 100644
--- a/resources/views/docs.blade.php
+++ b/resources/views/docs.blade.php
@@ -14,4 +14,5 @@
             </div>
         </section>
     </main>
+    <x-i.scrolltotop />
 </x-app-layout>