All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
- use full
anchor.hrefwhen pushing new URL to history, so the URL is resolved correctly even when a<base>element is used (#50)
- Build setup now uses
rollupfor more robust artifacts (decreases file sizes for.mjsfiles but increases them for.jsfiles) - Upgraded all dependencies
- Updated year in copyright notices
- Added
package#packageManagerfield to support corepack
- Prevent global scope pollution in UMD builds (previous babel/terser setup created global variables
eandt)
- The scroll navigation is now prevented if you call
event.preventDefault()on the click event (fix #32) - Polyfill now skips handling click events if the href has a query string that is different from the current one (fix #28)
Previously, a navigation from
/?page=1to/?page=2#contentwould not work: because the path is the same, the polyfill would intercept the navigation even though the different query params meant that the target was an entirely different page/website
- Support Css variable
scroll-behavior - UMD/AMD module with
define()
- Deprecated
window.__forceSmoothscrollAnchorPolyfill__(usepolyfill({ force: true })instead)
- After focusing a scroll target, the outline is only forcefully removed if it wasn't set by the user
- Minor adjustments to improve bundle size
- The CSS custom property
--scroll-behaviorcan now be used to adjust scroll behavior. Thefont-familyworkaround still works for supporting legacy browsers that don't implement CSS variables - Now usable as UMD module with
define()syntax
- After focusing a scroll target, the outline is only forcefully removed if it wasn't set by the user
- ES Module versions are now provided as
index.mjsandindex.min.mjs! - Firefox bug where
<a href="#top">doesn't smooth scroll now mentioned in docs
- Update docs to mention Firefox supporting both
scroll-behaviorandprefers-reduced-motion
- Support for (URL-encoded) special characters in fragments, e.g. "#👍🏻" (which the browser will encode to "#%F0%9F%91%8D%F0%9F%8F%BB")
- Updated README to include bundle size and SSR-compatibility as features
- Minor improvements to JSDoc typings
- Automatically prefix
anchor.pathnamewith leading slash if it's missing inisAnchorToLocalElement(), fixes flickering in IE9 (caused by clicks being handled byhandleHashchange()instead ofhandleClickdue to click handler not detecting the anchor) - Use correct property value in
font-familyexample in README
- Include minified version in bundle published to npm
- Entry
"unpkg"now actually points at minified version
destroy()andpolyfill()now return the polyfill instance so you can chain them- Tests for Node environment (→ SSR),
destroy(),polyfill()and{ force }override - Improved JSDoc typing for better IntelliSense completion
- Entry
"unpkg"inpackage.json, points at minified version so CDN serves smaller file
- You can now override
window.__forceSmoothscrollAnchorPolyfill__with the{ force: boolean }argument ofpolyfill() - Package entry (
"main") now points to unminified file so typing hints are kept - Explain usage of
{ behavior: 'instant' }(not in spec anymore) + outline alternative
- (Regression) Prevent 'window is not defined' error in Node environments
- Added feature overview to README
- The methods 'destroy' and 'polyfill' are now exported (CommonJS) or exposed on window.SmoothscrollAnchorPolyfill. The polyfill still runs automatically on load so embedding it is enough, but now you can destroy it if you want (EventListeners are removed) and start it again, later.
- In addition to
window.__forceSmoothscrollAnchorPolyfill__, you can now pass{ force: true }when invokingpolyfill()to force-enable the package even in browsers with native support
- Updated the documentation website to reflect the new API
- Moved the documentation in a separate docs/ folder to clean up the repo
- Small fixes for formatting and typos in the README
- The README.md file has been updated to match the API of v1.0.0
- BREAKING: Polyfill now only handles smooth scroll if scroll-behavior is set to 'smooth' via <html style="">, documentElement.style.scrollBehavior or a custom font-family (more information will be added to the documentation)
- Tests for smooth scrolling when clicking anchors have been implemented
- Fixed 'window is not defined' error in Node environments, important for usage with SSR
- The special fragment
#topis now supported for scrolling to the top, but only if no element with idtopis found - After navigating to an anchor, the respective hash is now appended to the URL using
history.pushState()to match default browser behavior. - When a hashchange event occurs, the polyfill tries to cancel the instant jumping scroll to the new hash, handling it with the smooth scroll instead.
- When navigating to an anchor, the anchor is now focused.
- In browsers supporting the optional
preventScrollargument, the anchor is focused immediately and the focus scroll is prevented by passing this argument. - If the browser doesn't support
preventScroll(e.g. Internet Explorer), the focus is scheduled to happen 450ms after the smooth scroll started so it does not interfere with the smooth scrolling (which caused flickering).
- The flag to enforce the polyfill (even if the browser has native support) is now called (
window.__forceSmoothscrollAnchorPolyfill__). The docs have been updated to reflect this.
- The polyfill now properly handles Shift/Meta keys and allows for opening links in new windows by shift-clicking instead of preventing it with
event.preventDefault() - The docs website now works in Internet Explorer 9, polyfills for
Element.classList,requestAnimationFrame+ an alternative for flexbox layouts have been added
- After a click, the DOM is now searched upwards for a matching anchor link instead of just checking the event target alone. Fixes issue with nested elements inside anchor links