mpa-enhancer
Advanced tools
Minimalist JavaScript to make your MPA work that much better
On reloading of a page will scroll back to where the user left off and focus on the last element they were looking at.
At 1.2 kB of minified JavaScript.
Install by downloading and linking to the script. You can use NPM too and copy it from there.
It works first by looking for the id on the last focused element. If not
present it will look for the name attribute. If both of those are missing you
can use the mpa-miss (see below) to target a different element to determine
the scroll location. If all those fail then it will scroll to the current
scrolled position of the page — this is not ideal as you can be deleting and
adding elements and this will make the scroll position slightly different.
These attributes can enable the enhancer to make special accommodation to your pages.
mpa-page-name: This overrides the default page name (the pathname in your
URL). Use it like so:
<body mpa-page-name="my-page-name">
mpa-persist: This will persist the page location even when you change pages
and come back later. Use it like so:
<body mpa-persist>
mpa-skip-focus: This will skip the focus of the element that you are on on
page refresh. Use it like so:
<input name=my-name mpa-skip-focus>
mpa-skip-scroll: This will skip the scrolling of the page. This is useful
when you focus in a location and don't want the scroll to move it to the new
spot. Use it like so:
<input name=my-name mpa-skip-scroll>
mpa-miss: This will give a back up location if the ID/name element is no
longer on the page after a refresh. You can supply it a back up location. Use it
like so:
<div id="my-backup-location" mpa-miss="#my-backup-location">
<input name=delete-me>
</div>
2.2.2/3/4/6
Improved scrolling location.
2.2.1
Fixed not working on Firefox and switched from event beforeunload to unload.
2.2.0
Added ability to persist pages and name a page different than the URL pathname.
2.1.1:
Fixed no element to focus on skipping scroll.
2.1.0:
When an element is hidden before reload still collect its information before
reload and use that instead of the body element.
2.0.0:
Changed the order from scrolling first to focus on what was focused before first.
FAQs
Minimalist JavaScript to make your MPA work that much better
The npm package mpa-enhancer receives a total of 2 weekly downloads. As such, mpa-enhancer popularity was classified as not popular.
We found that mpa-enhancer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.