diff --git a/Styles/main.css b/Styles/main.css index 83dd353..588b591 100644 --- a/Styles/main.css +++ b/Styles/main.css @@ -1144,4 +1144,43 @@ ul li i.fa-check { width: 95%; margin: 10% auto; } -} \ No newline at end of file +} + +/* Back To Top Button */ + +#backToTopBtn{ + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + + border: none; + border-radius: 50%; + + background: #3498db; + color: white; + + cursor: pointer; + + display: none; + + justify-content: center; + align-items: center; + + font-size: 20px; + + box-shadow: 0 4px 10px rgba(0,0,0,.2); + + transition: .3s; + z-index:999; +} + +#backToTopBtn:hover{ + background:#2980b9; + transform:translateY(-4px); +} + +#backToTopBtn.show{ + display:flex; +} \ No newline at end of file diff --git a/index.html b/index.html index edf7b35..66e26e9 100644 --- a/index.html +++ b/index.html @@ -244,6 +244,10 @@

Follow Us

// Load chatbot when the page is ready document.addEventListener('DOMContentLoaded', loadChatbot); + + diff --git a/scripts/main.js b/scripts/main.js index 2b604aa..0dbf823 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -270,4 +270,33 @@ document.addEventListener('DOMContentLoaded', function() { } }); } +}); + +// Back To Top Button + +document.addEventListener("DOMContentLoaded", () => { + + const backToTopBtn = document.getElementById("backToTopBtn"); + + if(!backToTopBtn) return; + + window.addEventListener("scroll", () => { + + if(window.scrollY > 300){ + backToTopBtn.classList.add("show"); + }else{ + backToTopBtn.classList.remove("show"); + } + + }); + + backToTopBtn.addEventListener("click", () => { + + window.scrollTo({ + top:0, + behavior:"smooth" + }); + + }); + }); \ No newline at end of file