Merge pull request #624 from HK853/Scroll-button

fixed overlapping issue also enhancement of button done
khushi-joshi-05 · May 28, 2024 · aaa8118 · aaa8118
2 parents aa615ee + eed517d
commit aaa8118
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 37 deletions.
diff --git a/Css-files/scroll-top-button.css b/Css-files/scroll-top-button.css
@@ -0,0 +1,35 @@
+.material-symbols-outlined {
+  font-variation-settings:
+  'FILL' 0,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 24
+}
+
+.scroll-top-button {
+  position: fixed;
+  top: 82%;
+  right: 2.4%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(45deg, rgb(234, 16, 16),#f2a736);
+  color: #f3f7f8;
+  border: none;
+  border-radius: 50%;
+  outline: none;
+  cursor: pointer;
+  display: none;
+}
+
+@keyframes bouncing {
+  0% {top: 82%;}
+  50% {top: 81%;}
+  100% {top: 82%;}
+}
+
+.scroll-top-button{
+  animation: bouncing 1s infinite ease-in-out;
+}
diff --git a/Html-files/top.js b/Html-files/top.js
@@ -0,0 +1,13 @@
+const topButton = document.getElementById("scroll-top-button");
+
+window.addEventListener("scroll", () => {
+  if (window.pageYOffset > 20) {
+    topButton.style.display = "block";
+  } else {
+    topButton.style.display = "none";
+  }
+});
+
+function goToTop() {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+}
diff --git a/index.html b/index.html
@@ -18,6 +18,9 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Fuggles&family=Mooli&family=Oswald:wght@600&family=Roboto:wght@100;300&display=swap"
         rel="stylesheet">
+    <link rel="stylesheet" href="Css-files/scroll-top-button.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
     <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -145,8 +148,8 @@ <h1>Click & Collect</h1><br>
                 <h1>Restaurant Dining</h1><br>
 
                 <a href="#" class="btn" onclick="openBookingModal()">Book Table</a>
-<!--                 <a href="#" class="btn">Book Table</a> -->
- 
+                <!--                 <a href="#" class="btn">Book Table</a> -->
+
 
             </div>
         </div>
@@ -391,28 +394,37 @@ <h3>Contact Us!</h3>
                 <div class="pages">
                     <h4>Follow Us</h4>
                     <div class="social-icons">
-                            <a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
-                            <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
-                            <a class="fa-brands fa-twitter" href="https://twitter.com" target="_blank"></a>
-                            <a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website" target="_blank"></a>
-                            <a class="fa-brands fa-discord" href="https://discord.com/invite/sybYafYA" target="_blank"></a>
+                        <a class="fa-brands fa-facebook" href="https://facebook.com" target="_blank"></a>
+                        <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a>
+                        <a class="fa-brands fa-twitter" href="https://twitter.com" target="_blank"></a>
+                        <a class="fa-brands fa-github" href="https://github.com/khushi-joshi-05/Food-ordering-website"
+                            target="_blank"></a>
+                        <a class="fa-brands fa-discord" href="https://discord.com/invite/sybYafYA" target="_blank"></a>
                     </div>
                     <p>Stay connected with us on social media for the latest updates, recipes, and foodie adventures.
                     </p>
                     <div class="copyright">
                         &copy; 2024 Foodies - All Rights Reserved | <span id="author">
-                            <a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank">Khushi Joshi</a>
+                            <a href="https://www.linkedin.com/in/khushi-joshi-95a587256/" target="_blank">Khushi
+                                Joshi</a>
                         </span></p>
                     </div>
                 </div>
             </div>
         </footer>
 
-        <!-- go to top button -->
-        <a href="#" id="gotop-btn" style="position: fixed; bottom: 100px; right: 40px; padding: 10px; background-color: brown; border-radius: 0.5rem;"><i class="fa-solid fa-angle-up"></i></a>
+        <!--Scroll top button-->
 
+        <button id="scroll-top-button" class="scroll-top-button" onclick="goToTop()">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"
+                class="arrow">
+                <path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
+            </svg>
+        </button>
+        <!--Scroll top button finish-->
     </div>
 
+    <script src="Html-files/top.js"></script>
     <script>
         window.addEventListener('beforeunload', function (event) {
             localStorage.clear();
@@ -422,7 +434,7 @@ <h4>Follow Us</h4>
         btn.onclick = () => {
             location.href = "./Html-files/menu.html";
         }
- main
+        main
 
         function redirectLogin() {
             window.location.href = "Html-files/login.html";
@@ -432,14 +444,14 @@ <h4>Follow Us</h4>
             window.location.href = "Html-files/signup.html";
         }
 
-        window.addEventListener('scroll', function() {
-  var navbar = document.querySelector('.navbar');
-  if (window.scrollY > 60) { // Adjust as needed based on when you want the effect to start
-    navbar.classList.add('scrolled');
-  } else {
-    navbar.classList.remove('scrolled');
-  }
-});
+        window.addEventListener('scroll', function () {
+            var navbar = document.querySelector('.navbar');
+            if (window.scrollY > 60) { // Adjust as needed based on when you want the effect to start
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        });
 
         window.addEventListener('scroll', function () {
             var navbar = document.querySelector('.navbar');
@@ -449,28 +461,28 @@ <h4>Follow Us</h4>
                 navbar.classList.remove('scrolled');
             }
         });
- main
+        main
 
         function openBookingModal() {
             var bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));
             bookingModal.show();
         }
     </script>
- main
-
-<script type="text/javascript">
-    (function(d, t) {
-        var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
-        v.onload = function() {
-          window.voiceflow.chat.load({
-            verify: { projectID: '6651593185e25f1a181125a3' },
-            url: 'https://general-runtime.voiceflow.com',
-            versionID: 'production'
-          });
-        }
-        v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
-    })(document, 'script');
-  </script>
+    main
+
+    <script type="text/javascript">
+        (function (d, t) {
+            var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
+            v.onload = function () {
+                window.voiceflow.chat.load({
+                    verify: { projectID: '6651593185e25f1a181125a3' },
+                    url: 'https://general-runtime.voiceflow.com',
+                    versionID: 'production'
+                });
+            }
+            v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
+        })(document, 'script');
+    </script>
 </body>
 <script>
     function redirectLogin() {
@@ -480,6 +492,6 @@ <h4>Follow Us</h4>
         window.location.href = "Html-files/signup.html";
     }
 </script>
- main
+main
 
-</html>
+</html>