Skip to content
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.

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

Already on GitHub? Sign in to your account

Fix: Skip Nav - Remove skip nav page jank #1663

Merged
merged 2 commits into from
Aug 15, 2023
Merged

Conversation

machikoyasuda
Copy link
Member

@machikoyasuda machikoyasuda commented Aug 15, 2023

closes #1661

This was bothering me a lot 馃槗 and I finally looked up a solid, easy solution w/o any drawbacks. Currently, when using the Skip Nav to get to #main-content and then continuing to use the keyboard for navigation, the site will scroll you back up the page when you go from #main-content to Previous Page. It creates a jarring user experience, where the page goes down, and then back up. This PR fixes it by adding a scroll-padding-top that's greater than the height of the nav (80px), so the screen doesn't move back up. This solution also doesn't affect anything else (like the footer position, main container height, etc).

Before After
broken fixed

@machikoyasuda machikoyasuda self-assigned this Aug 15, 2023
@machikoyasuda machikoyasuda requested a review from a team as a code owner August 15, 2023 22:05
@github-actions github-actions bot added front-end HTML/CSS/JavaScript and Django templates deployment-dev [auto] Changes that will trigger a deploy if merged to dev labels Aug 15, 2023
@machikoyasuda machikoyasuda merged commit cf013de into dev Aug 15, 2023
8 checks passed
@machikoyasuda machikoyasuda deleted the fix/1661-skip-nav-janking branch August 15, 2023 22:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
deployment-dev [auto] Changes that will trigger a deploy if merged to dev front-end HTML/CSS/JavaScript and Django templates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: Skip Nav causes page jank
2 participants