Widget:ScrollToTopSidebar: Difference between revisions
((by SublimeText.Mediawiker)) |
((by SublimeText.Mediawiker)) |
||
| Line 4: | Line 4: | ||
scrollToTopButton.innerHTML = 'Top <i class="fa-sharp-duotone fa-solid fa-up-to-bracket"></i>'; // Text and FA to top icon | scrollToTopButton.innerHTML = 'Top <i class="fa-sharp-duotone fa-solid fa-up-to-bracket"></i>'; // Text and FA to top icon | ||
scrollToTopButton.setAttribute('id', 'scrollToTop'); | scrollToTopButton.setAttribute('id', 'scrollToTop'); | ||
// Add the button to the document body | // Add the button to the document body | ||
Revision as of 17:20, 1 November 2024
<script> // Create the scroll to top button const scrollToTopButton = document.createElement('button'); scrollToTopButton.innerHTML = 'Top '; // Text and FA to top icon scrollToTopButton.setAttribute('id', 'scrollToTop');
// Add the button to the document body const container = document.getElementById('scrollToTopContainer'); container.appendChild(scrollToTopButton);
// Show/hide the button based on scroll position window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { scrollToTopButton.style.display = 'block'; } else { scrollToTopButton.style.display = 'none'; } });
// Scroll to top when the button is clicked scrollToTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script>
