Custom code

Custom code

remember page scroll

<script> // Helper function to generate a unique key for each page function getPageKey() { return window.location.pathname; // Use pathname as the key (e.g., "/about", "/test-pages/") } // Save scroll position when navigating away window.addEventListener('beforeunload', () => { const pageKey = getPageKey(); sessionStorage.setItem(`scrollPosition_${pageKey}`, window.scrollY); }); // Restore scroll position on page load window.addEventListener('DOMContentLoaded', () => { const pageKey = getPageKey(); const savedPosition = sessionStorage.getItem(`scrollPosition_${pageKey}`); if (savedPosition !== null) { window.scrollTo(0, parseInt(savedPosition, 10)); } }); </script>

page button scroll

WORKING CODE IN HERE
<script> function getPageKey() { const key = window.location.pathname; // Use pathname as the key (e.g., "/about", "/test-pages/") console.log('Page key generated:', key); return key; } // Save scroll position when navigating away function saveScrollPosition() { const pageKey = getPageKey(); sessionStorage.setItem(`scrollPosition_${pageKey}`, window.scrollY); console.log('Scroll position saved:', window.scrollY); } // Use `pagehide` instead of `beforeunload` window.addEventListener('pagehide', saveScrollPosition); // Add the floating button to the page function addReturnButton() { console.log('Adding return button...'); const button = document.createElement('button'); button.id = 'return-to-position-button'; button.textContent = 'Return to Article Position'; button.style.position = 'fixed'; button.style.bottom = '20px'; button.style.right = '20px'; button.style.padding = '10px 15px'; button.style.backgroundColor = '#007BFF'; // Blue background button.style.color = '#FFFFFF'; // White text button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; button.style.zIndex = '1000'; // Ensure it floats above other elements button.style.display = 'block'; // Always visible for testing // Add click functionality to the button button.addEventListener('click', () => { const pageKey = getPageKey(); const savedPosition = sessionStorage.getItem(`scrollPosition_${pageKey}`); if (savedPosition !== null) { console.log('Returning to saved position:', savedPosition); window.scrollTo({ top: parseInt(savedPosition, 10), behavior: 'smooth' }); } else { console.log('No saved position found for this page.'); } }); document.body.appendChild(button); console.log('Button added to the page!'); } // Add the button on page load window.addEventListener('DOMContentLoaded', () => { console.log('DOM fully loaded, initializing...'); addReturnButton(); }); </script>
 
styling:
<script> function getPageKey() { const key = window.location.pathname; // Use pathname as the key (e.g., "/about", "/test-pages/") console.log('Page key generated:', key); return key; } // Save scroll position when navigating away function saveScrollPosition() { const pageKey = getPageKey(); sessionStorage.setItem(`scrollPosition_${pageKey}`, window.scrollY); console.log('Scroll position saved:', window.scrollY); } // Use `pagehide` instead of `beforeunload` window.addEventListener('pagehide', saveScrollPosition); // Add the floating button to the page function addReturnButton() { console.log('Adding return button...'); const button = document.createElement('button'); button.id = 'return-to-position-button'; button.textContent = '↩ Return to Position'; button.style.position = 'fixed'; button.style.bottom = '20px'; button.style.right = '20px'; button.style.padding = '10px 15px'; button.style.backgroundColor = '#007BFF'; // Blue background button.style.color = '#FFFFFF'; // White text button.style.border = 'none'; button.style.borderRadius = '5px'; button.style.cursor = 'pointer'; button.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; button.style.zIndex = '1000'; // Ensure it floats above other elements button.style.display = 'block'; // Always visible for testing // Add click functionality to the button button.addEventListener('click', () => { const pageKey = getPageKey(); const savedPosition = sessionStorage.getItem(`scrollPosition_${pageKey}`); if (savedPosition !== null) { console.log('Returning to saved position:', savedPosition); window.scrollTo({ top: parseInt(savedPosition, 10), behavior: 'smooth' }); } else { console.log('No saved position found for this page.'); } }); document.body.appendChild(button); console.log('Button added to the page!'); } // Add the button on page load window.addEventListener('DOMContentLoaded', () => { console.log('DOM fully loaded, initializing...'); addReturnButton(); }); </script>

css:

/* return button */ #return-to-position-button { position: fixed; bottom: 20px; right: 20px; padding: 10px 15px; background-color: #007BFF; color: #FFFFFF; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000; display: block; font-size: 16px; font-weight: bold; transition: background-color 0.3s, transform 0.2s; } #return-to-position-button:hover { background-color: #0056b3; transform: scale(1.05); } #return-to-position-button i { vertical-align: middle; margin-right: 5px; } /* end return button */