This package add animated scrolling to all anchor links using scrollTo. It also adds a default cross-dissolve page transition which feels faster than the normal Nuxt out-in
transition. This works best when you do the second step of Install, making the page scroll to top before the transition starts.
yarn add nuxt-page-transition-and-anchor-handler
ornpm install nuxt-page-transition-and-anchor-handler
- Add
nuxt-page-transition-and-anchor-handler
to yourmodules
array
If you need to support browsers that don't support ScrollToOptions
give smoothscroll-polyfill
a shot.
Can be set with the module or in the config file under the ptah
key.
css
(true
) - Include the default transition styles (seetransition.css
)scrollToTopBeforePageChange
(true
) - Whether to explicitly and smoothly scroll to top before the page change transition.initialDelay
(500
) - How long to wait after thewindow.onNuxtReady
event before handling the initial page anchor. This gives the page a chance to render the elements you are trying to scroll to.afterPageChangeDelay
(0
) - How long to wait after a page changing event before handling the page anchor.anchorSelector
([data-anchor={{anchor}}]
) - The selector to scroll to.{{anchor}}
will be replaced with the URL hash (minus the '#').transition
(see source code) - The Nuxt transition object
These methods are injected globally:
this.$scrollTo(target)
- Target can be a number or a DOM elementthis.$scrollToTop()
- Shorthand for this.$scrollTo(0)this.$scrollComplete()
- Returns a Promise that resolves when the current scroll finishesthis.$setVerticalOffset()
- Set the vertical offset. You might use this when the header height changes responsively.