scrollTopBtn.ftl
1 <#--
2 Macro: scrollTopBtn
3
4 Description: Generates a button that appears when the user scrolls down the page, allowing them to easily scroll back to the top of the page when clicked.
5 -->
6 <#macro scrollTopBtn>
7 <a href="#" id="scroll" style="display: none;"><span></span></a>
8 <script>
9 document.addEventListener('DOMContentLoaded', function() {
10 // Get the scroll button element
11 const scrollButton = document.getElementById('scroll');
12
13 // Add scroll event listener to window
14 window.addEventListener('scroll', function() {
15 if (window.scrollY > 100) {
16 scrollButton.style.display = 'block';
17 } else {
18 scrollButton.style.display = 'none';
19 }
20 });
21
22 // Add click event listener to the scroll button
23 scrollButton.addEventListener('click', function(e) {
24 e.preventDefault();
25 window.scrollTo({
26 top: 0,
27 behavior: 'smooth'
28 });
29 });
30 });
31 </script>
32 </#macro>