MPA progressive enhancement for scrolling back to position and focusing on previously focused element.

MPA-Auto-Scroll-Auto-Focus.js

function getCleanUrlPath() {
    let url = new URL(document.location.href)
    return url.pathname.replace(/\/$/, "")
}

window.addEventListener('beforeunload', () => {
    let active = document.activeElement
    localStorage.pageLocation = JSON.stringify({
        href: getCleanUrlPath(),
        y: window.scrollY,
        height: document.body.scrollHeight,
        active: {
            id: active?.id,
            name: active?.getAttribute('name')
        }
    })
})

function onLoad() {
    if (document.querySelector('[autofocus]')) return
    let location = localStorage.pageLocation
    if (!location) return
    let { y, height, href, active: { id, name } } = JSON.parse(location)
    if (y && href === getCleanUrlPath()) {
        window.scrollTo({ top: y + document.body.scrollHeight - height })
    }
    let active =
        document.getElementById(id) ||
        document.querySelector(`[name="${name}"]`)
    if (active) {
        active.focus()
        // @ts-ignore
        active.select instanceof  Function && active.select()
    }
}

onLoad()