chore: use fixed position for the skip link

userquin/fix-skip-to-content
userquin 2 weeks ago
parent f773917332
commit 3f2009071a

@ -17,6 +17,7 @@ function focusOnTargetAnchor({ target }: Event) {
const el = targetEl?.querySelector<HTMLAnchorElement>('main h1[id][tabindex="-1"]') ?? targetEl const el = targetEl?.querySelector<HTMLAnchorElement>('main h1[id][tabindex="-1"]') ?? targetEl
if (el) { if (el) {
if (!el.hasAttribute('tabindex')) {
const removeTabIndex = () => { const removeTabIndex = () => {
el.removeAttribute('tabindex') el.removeAttribute('tabindex')
el.removeEventListener('blur', removeTabIndex) el.removeEventListener('blur', removeTabIndex)
@ -24,6 +25,7 @@ function focusOnTargetAnchor({ target }: Event) {
el.setAttribute('tabindex', '-1') el.setAttribute('tabindex', '-1')
el.addEventListener('blur', removeTabIndex) el.addEventListener('blur', removeTabIndex)
}
el.focus() el.focus()
window.scrollTo(0, 0) window.scrollTo(0, 0)
} }
@ -43,6 +45,7 @@ function focusOnTargetAnchor({ target }: Event) {
<style scoped> <style scoped>
.VPSkipLink { .VPSkipLink {
position: fixed;
top: 8px; top: 8px;
left: 8px; left: 8px;
padding: 8px 16px; padding: 8px 16px;

Loading…
Cancel
Save