Like this:
Like Loading...
// Add ARIA labels and keyboard support
document.addEventListener('DOMContentLoaded', function() {
const backToTop = document.getElementById('back-to-top');
// Add ARIA label
backToTop.setAttribute('aria-label', 'Scroll to top of page');
backToTop.setAttribute('role', 'button');
// Add keyboard support
backToTop.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
});
});
// Throttle scroll event for better performance
function throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
window.addEventListener('scroll', throttle(function() {
// Scroll handler code here
}, 100));
document.addEventListener('DOMContentLoaded', function() {
// Check if the 'back-to-top' button already exists, if not, create it
if (!document.getElementById('back-to-top')) {
const button = document.createElement('button');
button.id = 'back-to-top';
button.innerHTML = '↑';
button.setAttribute('aria-label', 'Scroll to top of page');
button.setAttribute('role', 'button');
document.body.appendChild(button);
}
const backToTopButton = document.getElementById('back-to-top');
// Show/hide button based on scroll position
function toggleBackToTopButton() {
if (window.pageYOffset >e 300) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
}
// Throttle scroll event for better performance
let isScrolling = false;
window.addEventListener('scroll', function() {
if (!isScrolling) {
window.requestAnimationFrame(function() {
toggleBackToTopButton();
isScrolling = false;
});
isScrolling = true;
}
});
// Smooth scroll to top
backToTopButton.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Add keyboard support for 'Enter' key to trigger scroll to top
backToTopButton.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
});
// ARIA support for accessibility
backToTopButton.setAttribute('aria-hidden', 'true');
backToTopButton.addEventListener('focus', function() {
backToTopButton.setAttribute('aria-hidden', 'false');
});
backToTopButton.addEventListener('blur', function() {
backToTopButton.setAttribute('aria-hidden', 'true');
});
});
