Skip to content

Commit

Permalink
Scroll back button
Browse files Browse the repository at this point in the history
  • Loading branch information
@shriyadindi
shriyadindi committed Nov 8, 2024
1 parent 913c1a6 commit d24d956
Showing 1 changed file with 148 additions and 97 deletions.
245 changes: 148 additions & 97 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3129,13 +3129,6 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
</div>

<script src="chatbot.js"></script>
<div class="fixed bottom-0 right-2 scroll-container" id="scrollContainer" style="display: none;">
<button class="scroll-button group" id="scrollTopBtn">
<span class="tooltip-text-scroll">
<div class="tooltip-icon"> <i class="fa-solid fa-arrow-up" ></i></div>
</span>
</button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
Expand Down Expand Up @@ -3182,16 +3175,6 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
});
});
</script>
<script>
window.addEventListener('scroll', function() {
const scrollContainer = document.getElementById('scrollContainer');
if (window.scrollY > 0) {
scrollContainer.style.display = 'block';
} else {
scrollContainer.style.display = 'none';
}
});
</script>

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

Expand Down Expand Up @@ -3314,70 +3297,6 @@ <h2>Exclusive Deals and Offers!</h2>
<!-- this script is for twitter icon starts -->
<script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
<!-- this script is for twitter icon ends -->
<script>
// script.js

// change the color of navbar while scrolling to make it visible

window.addEventListener("scroll", function () {
const navbar = document.querySelector(".main-head");
if (window.scrollY > 0) {
navbar.classList.add("sticky"); // Add class when scrolled
} else {
navbar.classList.remove("sticky"); // Remove class when at the top
}
});

window.onscroll = function () {
toggleScrollTopButton();
};

const scrollTopBtn = document.getElementById("scrollTopBtn");

function toggleScrollTopButton() {
if (
document.body.scrollTop > 100 ||
document.documentElement.scrollTop > 100
) {
scrollTopBtn.style.display = "block"; // Show button after scrolling down
} else {
scrollTopBtn.style.display = "none"; // Hide button when at the top
}

}

scrollTopBtn.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
};
</script>
// <script>
// document.getElementById('contactForm').addEventListener('submit', function (e) {
// e.preventDefault();

// // Submit the form data using fetch
// fetch(this.action, {
// method: 'POST',
// body: new FormData(this),
// headers: {
// 'Accept': 'application/json'
// }
// }).then(response => {
// // Show the confirmation popup
// document.getElementById('confirmationPopup').style.display = 'block';
// // Reset the form
// this.reset();
// }).catch(error => {
// console.error('Error:', error);
// // Still show the confirmation popup even if there's an error
// document.getElementById('confirmationPopup').style.display = 'block';
// });
// });


// function closePopup() {
// document.getElementById('confirmationPopup').style.display = 'none';
// }
// </script>
<script>
document.getElementById('reviewForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents form submission
Expand Down Expand Up @@ -3421,22 +3340,6 @@ <h2>Exclusive Deals and Offers!</h2>
defer
></script>
<!-- Adding scroll progressBar-->
<script>

window.onscroll = function() {
updateProgressBar();
};


function updateProgressBar() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;

document.getElementById("progressBar").style.width = scrollPercent + "%";
}

</script>
<style>
.popup {
position: fixed;
Expand Down Expand Up @@ -3634,6 +3537,154 @@ <h2>Exclusive Deals and Offers!</h2>
</iframe>
</div>
</div>
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<i class="fa-solid fa-arrow-up"></i>
</div>
<svg class="progress-ring" width="60" height="60">
<circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
cy="30"></circle>
</svg>
</button>
<style>
.scroll-top {
position: fixed;
right: 1.6%;
background: linear-gradient(100deg, #1ca6f0, #3c7aff, #05deff);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
overflow: visible;
z-index: 10;
bottom: 75px;
/* Ensure button is on top */
}

.scroll-top.show {
opacity: 1;
visibility: visible;
}

.scroll-top:hover {
transform: scale(1.1);
/* Subtle scaling instead of expanding */
box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
/* Slightly larger shadow */
}

.scroll-top:active {
transform: scale(1.05);
/* Minor scale reduction on click */
}

.scroll-top-icon {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
}

.scroll-top:hover .scroll-top-icon {
transform: translateY(-3px);
}

/* Progress Ring Styling */
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
/* To start from the top */
}

.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform-origin: 50% 50%;
}

/* Pulse Animation */
@keyframes pulse {
0% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}

50% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
}

100% {
box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
}
}

.scroll-top:hover {
animation: pulse 1.5s infinite;
}

.scroll-top.show {
animation: none;
/* No animation when showing the button */
}

.scroll-top.show:hover {
animation: pulse 1.5s infinite;
/* Pulse on hover */
}
</style>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");
const progressCircle = document.querySelector(".progress-ring__circle");
const radius = progressCircle.r.baseVal.value;
const circumference = 2 * Math.PI * radius;

// Set the circle progress properties
progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
progressCircle.style.strokeDashoffset = circumference;

// Function to show or hide the button based on scroll position
function toggleScrollButton() {
if (window.scrollY > 100) {
scrollToTopBtn.classList.add("show");
} else {
scrollToTopBtn.classList.remove("show");
}
}

// Function to set the scroll progress on the button ring
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
}

// Listen for scroll events to update button visibility and progress
window.addEventListener("scroll", () => {
toggleScrollButton();
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
setProgress(scrollPercent);
});

// Smooth scroll to top when the button is clicked
scrollToTopBtn.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});

</script>

<!-- Scripts -->
<script src="script.js"></script>
Expand Down

0 comments on commit d24d956

Please sign in to comment.