From 446703c79398aee65fb2d37c31c99c1a5637ca74 Mon Sep 17 00:00:00 2001 From: ShadyLane Date: Tue, 1 Oct 2024 18:32:42 +0530 Subject: [PATCH] Added a Back-to-Top Button --- assets/css/style.css | 75 ++++++++++++++++++++++++++++++++++++++++++-- assets/js/script.js | 24 ++++++++++++++ index.html | 28 +++++++++++------ 3 files changed, 115 insertions(+), 12 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..35bedcf 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1340,6 +1340,38 @@ textarea.input-field { +/*-----------------------------------*\ + #BACK TO TOP +\*-----------------------------------*/ + +.back-top-btn { + position: fixed; + bottom: 20px; + right: 20px; + background-color: var(--gold-crayola); + color: var(--smoky-black-1); + font-size: 22px; + width: 50px; + height: 50px; + border-radius: var(--radius-circle); + display: grid; + place-items: center; + box-shadow: var(--shadow-1); + transition: var(--transition-1); + opacity: 0; + visibility: hidden; + z-index: 4; +} + +.back-top-btn:is(:hover, :focus-visible) { + background-color: var(--white); + color: var(--gold-crayola); +} + +.back-top-btn.active { + opacity: 1; + visibility: visible; +} @@ -1956,7 +1988,7 @@ textarea.input-field { margin-block-end: 55px; } - + /** * TESTIMONIALS @@ -2051,4 +2083,43 @@ textarea.input-field { left: 0; } -} \ No newline at end of file +} +/* CSS for footer-list hover effect */ +.footer-list .footer-link { + position: relative; + display: inline-block; + padding-bottom: 2px; + transition: color 0.3s ease-in-out; +} + +.footer-list .footer-link::before, +.footer-list .footer-link::after { + content: ""; + position: absolute; + left: 50%; + bottom: 0; + width: 0; + height: 2px; + background-color: #000; + transition: width 0.4s ease, left 0.4s ease, background-color 0.3s ease-in-out; +} + +.footer-list .footer-link::before { + transform: translateY(-4px); +} + +.footer-list .footer-link::after { + transform: translateY(4px); +} + +.footer-list .footer-link:hover::before, +.footer-list .footer-link:hover::after { + width: 100%; + left: 0; + background-color: #e4c491; +} + +.footer-list .footer-link:hover { + color: #e4c491; +} + diff --git a/assets/js/script.js b/assets/js/script.js index 39208c6..8e942b8 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -41,6 +41,30 @@ const toggleNavbar = function () { } + + +const header = document.querySelector("[data-header]"); +const backTopBtn = document.querySelector("[data-back-top-btn]"); + +let lastScrollPos = 0; + +const hideHeader = function () { + const isScrollBottom = lastScrollPos < window.scrollX; + + lastScrollPos = window.scrollX; +} + +window.addEventListener("scroll", function () { + if (window.scrollY >= 50) { + //Do something + } else { + + //Do something + } +}); + + + /** * HERO SLIDER */ diff --git a/index.html b/index.html index c8b6708..ebdf257 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@
- +
@@ -332,8 +332,7 @@

We Offer Top Notch

- Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industrys - standard dummy text ever. + Get the best in class dining experience with the most articulate culinary craftsmanship at Grilli. Bon Apétit!