Skip to content

Creates script to preserve menu's scroll position on click. #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Creates script to preserve menu's scroll position on click. #75

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions themes/cupper/layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,29 @@ <h3 class="sidebar-headings">
</div>
<script src="{{ "js/prism.js" | absURL }}"></script>
<script src="{{ "js/dom-scripts.js" | absURL }}"></script>
{{/* Script to preserve nav scroll position */}}
<script>
// Stores the scroll position in localStorage
function storeScrollPosition() {
const navElement = document.getElementById('patterns-nav');
if (navElement) {
localStorage.setItem('navScrollPosition', navElement.scrollTop);
}
}
// Restores the scroll position from localStorage
function restoreScrollPosition() {
const navElement = document.getElementById('patterns-nav');
const storedScrollPosition = localStorage.getItem('navScrollPosition');
if (navElement && storedScrollPosition !== null) {
navElement.scrollTop = parseInt(storedScrollPosition, 10);
}
}
// Attaches an event listener to the window's beforeunload event to store the scroll position
window.addEventListener('beforeunload', storeScrollPosition);
// Calls the restoreScrollPosition function when the page loads
window.addEventListener('load', restoreScrollPosition);
Copy link
Collaborator

@SaptakS SaptakS Sep 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try maybe DOMContentLoaded. Also, you can put this JS in head instead of end of body, to make this JS run at the very beginning. These 2 might help reduce the jump timing. There will still always be a microsecond of jump between DOM being loaded and JS being executed.

</script>

{{ if .Page.IsHome }}
<script src="{{ "js/service-worker-registration.js" | absURL }}"></script>
{{ end }}
Expand Down