Skip to content

Add Animated Scroll-to-Top Button Across All Pages. #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Soumyadipgithub wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Add Animated Scroll-to-Top Button Across All Pages. #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5dc57b7
Create Scroll.js
Soumyadipgithub Feb 23, 2025
cf114b8
Create Scroll.css
Soumyadipgithub Feb 23, 2025
df10343
Update index.html
Soumyadipgithub Feb 23, 2025
0ba801c
Update Scroll.css
Soumyadipgithub Feb 23, 2025
f710c81
Update index.html
Soumyadipgithub Feb 23, 2025
1a11c57
Update contact.html
Soumyadipgithub Feb 23, 2025
3b60044
Update contributors.html
Soumyadipgithub Feb 23, 2025
804d778
Update about.html
Soumyadipgithub Feb 23, 2025
38fb5dc
Update feature.html
Soumyadipgithub Feb 23, 2025
772df90
Update appointment.html
Soumyadipgithub Feb 23, 2025
e56af16
Update service.html
Soumyadipgithub Feb 23, 2025
7b83548
Update team.html
Soumyadipgithub Feb 23, 2025
6c9d0af
Update testimonial.html
Soumyadipgithub Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">

</head>

<body>
Expand Down Expand Up @@ -384,8 +386,15 @@ <h5 class="text-light mb-4">Newsletter</h5>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="fa-solid fa-arrow-up"></i></a>
<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>



<!-- JavaScript Libraries -->
Expand Down Expand Up @@ -430,6 +439,7 @@ <h5 class="text-light mb-4">Newsletter</h5>
<div class="circle"></div>

<script src="lib/wow/customcursor.js"></script>
<script src="js/Scroll.js"></script>

<script> window.chtlConfig = { chatbotId: "6729786373" } </script>
<script async data-id="6729786373" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
Expand Down Expand Up @@ -532,4 +542,4 @@ <h5 class="text-light mb-4">Newsletter</h5>
</script>
</body>

</html>
</html>
16 changes: 13 additions & 3 deletions appointment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">


<!-- for new twitter logo CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
Expand Down Expand Up @@ -292,8 +294,15 @@ <h5 class="text-light mb-4">Newsletter</h5>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>
<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>



<!-- JavaScript Libraries -->
Expand Down Expand Up @@ -338,6 +347,7 @@ <h5 class="text-light mb-4">Newsletter</h5>
<div class="circle"></div>

<script src="lib/wow/customcursor.js"></script>
<script src="js/Scroll.js"></script>

<script> window.chtlConfig = { chatbotId: "6729786373" } </script>
<script async data-id="6729786373" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
Expand Down Expand Up @@ -440,4 +450,4 @@ <h5 class="text-light mb-4">Newsletter</h5>
</script>
</body>

</html>
</html>
14 changes: 10 additions & 4 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">

<!-- for new twitter logo CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
Expand Down Expand Up @@ -310,10 +311,14 @@ <h5 class="text-light mb-4">Newsletter</h5>
</div>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>

<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Expand Down Expand Up @@ -357,6 +362,7 @@ <h5 class="text-light mb-4">Newsletter</h5>
<div class="circle"></div>

<script src="lib/wow/customcursor.js"></script>
<script src="js/Scroll.js"></script>

<script> window.chtlConfig = { chatbotId: "6729786373" } </script>
<script async data-id="6729786373" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
Expand Down
17 changes: 12 additions & 5 deletions contributors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@

<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">


<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
Expand Down Expand Up @@ -201,10 +203,14 @@ <h5 class="text-light mb-4">Newsletter</h5>
</div>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>

<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Expand All @@ -220,6 +226,7 @@ <h5 class="text-light mb-4">Newsletter</h5>

<!-- Template Javascript -->
<script src="js/main.js"></script>
<script src="js/Scroll.js"></script>

<!-- custom cursor code -->

Expand Down Expand Up @@ -338,4 +345,4 @@ <h5 class="text-light mb-4">Newsletter</h5>
</script>
</body>

</html>
</html>
59 changes: 59 additions & 0 deletions css/Scroll.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* Scroll */
#scrollButton {
position: fixed;
bottom: 75px;
right: 15px;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000;
opacity: 0; /* Initially hidden */
pointer-events: none; /* Prevent interaction when hidden */
transition: opacity 0.7s ease; /* Smooth fade-in effect */
}


#scrollButton.visible {
opacity: 1; /* Fully visible */
pointer-events: auto; /* Enable interaction */
}

.outer-circle {
position: relative;
width: 46px;
height: 46px;
border-radius: 50%;
background: conic-gradient(
#0075f4 0deg,
#004bee var(--scroll-progress, 0deg),
#e9363600 var(--scroll-progress, 0deg),
#b3575700 360deg
);
transform: rotate(-90deg); /* Start animation from top */
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}

.inner-circle {
width: 30px;
height: 30px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgb(0 0 0 / 66%);
}

.arrow {
font-size: 18px;
color: #0075f4;
font-weight: 1000; /* Extreme weight for more boldness */
text-shadow: 2px 2px 4px rgb(0 0 0 / 45%); /* Add shadow to make it appear thicker */
transform: rotate(90deg); /* Fixed direction to the right */
}
16 changes: 13 additions & 3 deletions feature.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">

</head>

<body>
Expand Down Expand Up @@ -309,8 +311,15 @@ <h5 class="text-light mb-4">Newsletter</h5>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>
<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>



<!-- JavaScript Libraries -->
Expand Down Expand Up @@ -355,6 +364,7 @@ <h5 class="text-light mb-4">Newsletter</h5>
<div class="circle"></div>

<script src="lib/wow/customcursor.js"></script>
<script src="js/Scroll.js"></script>

<script> window.chtlConfig = { chatbotId: "6729786373" } </script>
<script async data-id="6729786373" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
Expand Down Expand Up @@ -456,4 +466,4 @@ <h5 class="text-light mb-4">Newsletter</h5>
</script>
</body>

</html>
</html>
19 changes: 13 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">

</head>

<body>
Expand Down Expand Up @@ -568,10 +570,14 @@ <h5 class="text-light mb-4">Newsletter</h5>
</div>
</div>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="fa-solid fa-arrow-up"></i></a>
<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>


<!-- JavaScript Libraries -->
Expand All @@ -587,7 +593,8 @@ <h5 class="text-light mb-4">Newsletter</h5>
<script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>

<!-- Template Javascript -->
<script src="js/main.js"></script>
<script src="js/main.js"></script>
<script src="js/Scroll.js"></script>

<!-- custom cursor code -->

Expand Down Expand Up @@ -722,4 +729,4 @@ <h5 class="text-light mb-4">Newsletter</h5>

</body>

</html>
</html>
27 changes: 27 additions & 0 deletions js/Scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!-- Scroll to Top Button -->

const scrollButton = document.getElementById('scrollButton');
const outerCircle = document.querySelector('.outer-circle');
const arrow = document.querySelector('.arrow');

// Function to handle scroll behavior
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollProgress = (scrollTop / scrollHeight) * 360;

// Show button after scrolling 7-8 lines (~100px)
if (scrollTop > 100) {
scrollButton.classList.add('visible');
} else {
scrollButton.classList.remove('visible');
}

// Update the circular progress
outerCircle.style.setProperty('--scroll-progress', `${scrollProgress}deg`);
});

// Scroll-to-top functionality
scrollButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
16 changes: 13 additions & 3 deletions service.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link href="css/Scroll.css" rel="stylesheet">

</head>

<body>
Expand Down Expand Up @@ -397,8 +399,15 @@ <h5 class="text-light mb-4">Newsletter</h5>
<!-- Footer End -->


<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square rounded-circle back-to-top"><i class="bi bi-arrow-up"></i></a>
<!-- Top scroll button -->
<div id="scrollButton" class="hidden">
<div class="outer-circle">
<div class="inner-circle">
<div class="arrow"><i class="fa-solid fa-arrow-up"></i></div>
</div>
</div>
</div>



<!-- JavaScript Libraries -->
Expand Down Expand Up @@ -443,6 +452,7 @@ <h5 class="text-light mb-4">Newsletter</h5>
<div class="circle"></div>

<script src="lib/wow/customcursor.js"></script>
<script src="js/Scroll.js"></script>

<script> window.chtlConfig = { chatbotId: "6729786373" } </script>
<script async data-id="6729786373" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
Expand Down Expand Up @@ -545,4 +555,4 @@ <h5 class="text-light mb-4">Newsletter</h5>
</script>
</body>

</html>
</html>
Loading