From 2d986feb34fcdb2a2731cff7b29b0a4d0563787e Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Wed, 17 Apr 2024 01:58:00 -0500 Subject: [PATCH] fix: skip-to-content scroll behavior (#2401) --- src/core/event/index.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/core/event/index.js b/src/core/event/index.js index 6df41a83a..aa6ddae7e 100644 --- a/src/core/event/index.js +++ b/src/core/event/index.js @@ -31,7 +31,7 @@ export function Events(Base) { // Move focus to content if (query.id || source === 'navigate') { - this.focusContent(); + this.#focusContent(); } if (loadNavbar) { @@ -139,19 +139,15 @@ export function Events(Base) { #enableScrollEvent = true; #coverHeight = 0; - #skipLink(el) { - el = dom.getNode(el); - - if (el === null || el === undefined) { - return; - } - - dom.on(el, 'click', evt => { - const target = dom.getNode('#main'); + #skipLink(elm) { + elm = typeof elm === 'string' ? dom.find(elm) : elm; + elm?.addEventListener('click', evt => { evt.preventDefault(); - target && target.focus(); - this.#scrollTo(target); + dom.getNode('main')?.scrollIntoView({ + behavior: 'smooth', + }); + this.#focusContent({ preventScroll: true }); }); } @@ -177,7 +173,7 @@ export function Events(Base) { .begin(); } - focusContent() { + #focusContent(options = {}) { const { query } = this.route; const focusEl = query.id ? // Heading ID @@ -188,7 +184,7 @@ export function Events(Base) { dom.find('#main'); // Move focus to content area - focusEl && focusEl.focus(); + focusEl && focusEl.focus(options); } #highlight(path) {