Docs: add scroll-margin-top for keyboard navigation

[patrickhlauke]

Description

Adds scroll-margin-top to the documentation styles https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

Motivation & Context

When navigating with the keyboard, if you scroll down a documentation page and then navigate in reverse (Shift+Tab), keyboard focus can land behind the sticky header. This small CSS addition prevents this from happening.

With a hat-tip to @joelamyman for the inspiration.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Video

Screen recording showing the reverse keyboard navigation before (with me jiggling the mouse at the top whenever keyboard focus is obscured by the sticky header) and after this addition.

bootstrap-scroll-margin-before-after.mp4

Note that code blocks still seem to have a funky behaviour, but this looks more like a browser bug/shortcoming.

Live previews

https://deploy-preview-37926--twbs-bootstrap.netlify.app/docs/5.3/getting-started/introduction/#community

Scroll down/jump to "Community", then navigate in reverse using Shift+Tab

[mdo]

Wow, nice! This adds the scroll offset without that annoying bug we saw (where clicking a dropdown in the navbar scrolled you back up the page a little each time). Maybe we just add this to the docs.scss stylesheet instead of a new partial?

[patrickhlauke]

Wow, nice! This adds the scroll offset without that annoying bug we saw (where clicking a dropdown in the navbar scrolled you back up the page a little each time). Maybe we just add this to the docs.scss stylesheet instead of a new partial?

@mdo as the docs.scss is, up to now, mostly just calling partials, I thought I'd stick with that same philosophy/approach here to keep things nice and neat. not fussed about it either way, but think it would be odd if just for this, we start putting actual styles definitions in the docs.scss itself