Widget:ScrollToTopSidebar

From Bodhicitta
Revision as of 17:16, 1 November 2024 by Jeremi (talk | contribs) ((by SublimeText.Mediawiker))

<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'); scrollToTopButton.style.cssText = ` width: 100%; text-align: center; height: 50px; font-size: 1em; border: none; cursor: pointer; display: none; z-index: 1000; background: transparent; `; scrollToTopButton.addEventListener('mouseover', () => { scrollToTopButton.style.cssText = ` background: rgba(186,27,29,0.4); `; });

// 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>