Skip to content
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

B2T Fixes | Issue #205 #254

Closed
wants to merge 7 commits into from
Closed

B2T Fixes | Issue #205 #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b726d96
B2T Fixes
Shariq2003 Oct 9, 2024
252f2f3
Merge Conflicts Fixes
Shariq2003 Oct 11, 2024
ed08b71
B2T Enhancement and Conflict Resolve
Shariq2003 Oct 14, 2024
3b5bf63
Fix Conflicts
Shariq2003 Oct 18, 2024
b6051be
Fixes Conflicts
Shariq2003 Oct 20, 2024
3bd589d
Fix Conflicts
Shariq2003 Oct 25, 2024
0489a2c
Fix COnflicts
Shariq2003 Oct 28, 2024
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
18 changes: 9 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,15 +691,15 @@ <h2>Feedback Form</h2>


<!-- Scroll to Top Button -->
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<ion-icon name="arrow-up-outline"></ion-icon>
</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>
<button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
<div class="scroll-top-icon">
<ion-icon name="arrow-up-outline"></ion-icon>
</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>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Expand Down
64 changes: 33 additions & 31 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ function toggleMenu() {
menuList.style.paddingTop = "0px";
}
}
window.onscroll = function () {
updateProgressBar();
};

window.onscroll = function() {
updateProgressBar();
};
function updateProgressBar() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight =
Expand All @@ -26,21 +26,21 @@ function updateProgressBar() {
var scrollPercent = (scrollTop / scrollHeight) * 100;
document.getElementById("progressBar").style.width = scrollPercent + "%";
}

document.addEventListener("DOMContentLoaded", () => {
console.log("Website loaded successfully!");
});

// Show or hide the scroll-top button based on scroll position
window.addEventListener('scroll', function() {
window.addEventListener('scroll', function () {
const scrollTopButton = document.querySelector('.scroll-top');
if (window.pageYOffset > 300) {
scrollTopButton.style.display = 'block';
scrollTopButton.style.display = 'block';
} else {
scrollTopButton.style.display = 'none';
scrollTopButton.style.display = 'none';
}
});

document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
const progressRing = scrollToTopBtn.querySelector('circle');
const rootElement = document.documentElement;
Expand All @@ -52,39 +52,41 @@ document.addEventListener('DOMContentLoaded', function() {
progressRing.style.strokeDashoffset = circumference;

function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
progressRing.style.strokeDashoffset = offset;
const offset = circumference - percent / 100 * circumference;
progressRing.style.strokeDashoffset = offset;
}

function handleScroll() {
const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
const scrolled = (rootElement.scrollTop / scrollTotal) * 100;
const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
const scrolled = (rootElement.scrollTop / scrollTotal) * 100;

// Show or hide the scroll-to-top button based on scroll position
if (window.pageYOffset > 300) {
scrollToTopBtn.classList.add('show');
} else {
scrollToTopBtn.classList.remove('show');
}
if (window.pageYOffset > 300) {
scrollToTopBtn.classList.add('show');
} else {
scrollToTopBtn.classList.remove('show');
}

// Update progress circle
requestAnimationFrame(() => {
setProgress(scrolled);
});
requestAnimationFrame(() => {
setProgress(scrolled);
});
}

function scrollToTop() {
rootElement.scrollTo({
top: 0,
behavior: 'smooth'
});
// Smooth scroll to top function
function smoothScrollToTop() {
const scrollY = window.pageYOffset;
const scrollStep = Math.max(10, Math.floor(scrollY / 20));
if (scrollY > 0) {
window.scrollBy(0, -scrollStep);
requestAnimationFrame(smoothScrollToTop);
}
}

scrollToTopBtn.addEventListener('click', scrollToTop);
window.addEventListener('scroll', handleScroll);
scrollToTopBtn.addEventListener('click', () => {
requestAnimationFrame(smoothScrollToTop);
});

// Initial check in case the page is already scrolled on load
handleScroll();
window.addEventListener('scroll', handleScroll);
handleScroll(); // Initial check
});

function toggleTheme() {
Expand Down
Loading