back to top button

itsvijaysingh · Feb 15, 2024 · 4239b38 · 4239b38
1 parent 5c53a46
commit 4239b38
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -974,3 +974,20 @@ a:hover{
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+
+/*--------- Back To Top ------------*/
+
+#backToTopButton{
+    display: none;
+    position: fixed;
+    right: 10px;
+    bottom: 0px;
+    z-index: 999;
+    transition: var(--transition-default);
+}
+
+
+#backToTopButton:hover{
+    color: var(--primary-color);
+    transform: translate(0, -0.25rem) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
+}
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -21,8 +21,12 @@ if (switchThemeBtn) {
     });
 }
 
-// Fixed Header on Scroll
+//AOS Initiliaze
+AOS.init();
+
+// Fixed Header & back to top button on Scroll
 window.addEventListener('scroll', () => {
+    // fixed header
     const header = document.getElementById('header');
     if (window.scrollY > 30 && !header.classList.contains('fixed-top')) {
         header.classList.add('fixed-top');
@@ -31,10 +35,22 @@ window.addEventListener('scroll', () => {
         header.classList.remove('fixed-top');
         document.getElementById('offcanvasNavbar').classList.remove('fixedHeaderNavbar');
     }
+
+    //backtotop
+    const backToTopButton = document.getElementById("backToTopButton");
+    if (window.scrollY > 400 && backToTopButton.style.display === 'none') {
+        backToTopButton.style.display = 'block';
+    } else if (window.scrollY <= 400 && backToTopButton.style.display === 'block') {
+        backToTopButton.style.display = 'none';
+    }
 });
 
-//AOS Initiliaze
-AOS.init();
+
+//jumping to top function
+function scrollToTop(){
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+}
 
 //Testimonial Slider
 $(document).ready(function(){

diff --git a/index.html b/index.html
@@ -546,6 +546,14 @@ <h2 class="section-heading text-center">Get In Touch</h2>
         </div>
     </footer>
 
+    <button class="btn" id="backToTopButton" onclick="scrollToTop()" style="display: none;">
+        <span aria-label="Back to top">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-up-square" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 9.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
+              </svg>
+        </span>
+    </button>
+
     <!-- JavaScript -->
     <script src="https://unpkg.com/[email protected]/dist/aos.js" defer></script>
     <script src="assets/js/jquery-3.7.1.min.js" defer></script>