Widget:ScrollToTopSidebar: Difference between revisions
((by SublimeText.Mediawiker)) |
((by SublimeText.Mediawiker)) |
||
| Line 2: | Line 2: | ||
// Create the scroll to top button | // Create the scroll to top button | ||
const scrollToTopButtonSb = document.createElement('button'); | const scrollToTopButtonSb = document.createElement('button'); | ||
scrollToTopButtonSb.innerHTML = ' | scrollToTopButtonSb.innerHTML = 'to top <i class="fa-sharp-duotone fa-solid fa-arrow-up-to-line ml-2"></i>'; | ||
scrollToTopButtonSb.setAttribute('id', 'scrollToTop'); | scrollToTopButtonSb.setAttribute('id', 'scrollToTop'); | ||
Revision as of 11:24, 11 April 2025
<script> // Create the scroll to top button const scrollToTopButtonSb = document.createElement('button'); scrollToTopButtonSb.innerHTML = 'to top '; scrollToTopButtonSb.setAttribute('id', 'scrollToTop');
// Add the button to the document body const container = document.getElementById('scrollToTopContainer'); container.appendChild(scrollToTopButtonSb);
// Handle initial hash navigation window.addEventListener('load', () => { if (window.location.hash) { setTimeout(() => { const element = document.querySelector(window.location.hash); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }, 100); } });
// Show/hide the button based on scroll position window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { scrollToTopButtonSb.style.display = 'block'; } else { scrollToTopButtonSb.style.display = 'none'; } });
// Scroll to top when the button is clicked scrollToTopButtonSb.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script>
