Use scroll-behavior: smooth for anchor links

[evadecker]

Description

Transitions can help orient users and communicate location within a site or document. This PR adds scroll-behavior: smooth to html to enable scroll transitions between anchor links in the table of contents to help communicate position within a page.

• scroll-behavior: smooth is not added for people who have prefers-reduced-motion set to true.
• Smooth scrolling does not apply when switching between tabs, since syncing window scroll between panes with varying content lengths causes jank when smooth scroll is on

Before:

no-smooth-scroll.mp4

After:

with-smooth-scroll.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ad93fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Jul 5, 2024 1:01pm

[HiDeoo]

Thanks for the contribution and very detailed pull request 🙌

Adding smooth scrolling to Starlight is something that we have considered, discussed and decided against in the past. To give a brief summary of some of the reasons:

• Instead of accessing content immediately after clicking an anchor or a ToC item, users have to wait for the smooth scrolling to finish which can take a bit especially on longer pages.
• Users with vestibular disorders could be affected by the smooth scrolling and even though you took care of handling the prefers-reduced-motion media query, it's still a concern if people are not aware of it or don't know how to configure it.
• Tabbing through the page with the keyboard can be a bit more difficult with smooth scrolling enabled.

After discussing this with the team, these reasons still hold and considering that users can implement smooth scrolling using custom CSS if they want to, we feel that it's better to keep the default behavior as it is.

As usual, always happy to discuss and consider ideas either in a GitHub discussion or in the Astro Discord server. Thanks again for the PR.

[evadecker]

Didn't realize this had already been discussed. 😅

Thanks for the feedback, @HiDeoo.