fix: skip-to-content scroll behavior

[jhildenbiddle]

Summary

Fixes an issue the new (unreleased) "Skip to Content" link that caused an immediate jump to to the content (instead scrolling) and the main content to scroll down (instead of being static) into place.

Example of bug (develop branch preview w/ Chrome 123)

The incorrect behavior is the result of three separate things occurring at the same time:

1. By default, browsers will automatically scroll any offscreen element that receives focus into view. This is the correct behavior for accessibility purposes because the focused item should be in view.
2. Clicking the "Skip to Content" link places the focus on the main content area. This is the correct behavior for accessibility purposes because the focused item should be in view. However, by placing the focus on an off-screen element, the browser's default behavior (see above) causes the scroll position to jump to the content instead of smoothly scrolling to it.
3. Docsify's "smooth scroll" behavior aligns the main content container element to the top edge of the viewport.

Example-Bug.mp4

Example of fix (PR changes w/ Chrome 123)

The fix if simple thanks to modern APIs: set the preventScroll option to true when calling the browser's native focus() method:

Example-fix.mp4

Related issue, if any:

None

What kind of change does this PR introduce?

Bugfix

For any code change,

N/A

Does this PR introduce a breaking change?

No

Tested in the following browsers:

• Chrome
• Firefox
• Safari

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docsify-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 17, 2024 5:57am

[Koooooo-7]

Hi @jhildenbiddle , could plz more details on it? (Much thx that if you could provide a screenshot/recording)
sorry, that I don't full understand the behaviors.

As per the early discuss and my understanding, thats what I did:
I open 2 preview, with and without this fix.

On the preview site, press Tab, click the Skip to content is fine.
Then, I tabs Tab multi times, and click or switch sections.

[jhildenbiddle]

@Koooooo-7 --

I've added descriptions and videos demonstrating the bug and the fix to PR summary (above).

[Koooooo-7]

LGTM, and nice experience improvement.

[sy-records]

LGTM. Good job!