next-restore-scroll

    1.2.1 • Public • Published

    next-restore-scroll

    After switching routes in Next.js, via the forward and back buttons, the scroll position can be lost. This is often because only the body tag will have its position restored, and sometimes the main scrolling window is another element. This package can fix this, and it can also restore the scroll position of any other elements in the page, after using dynamic next/router links.

    How it works

    next-restore-scroll simply saves the scroll position of the chosen element(s) in sessionStorage before the next router page is changed, and then applies the scroll position after the route has loaded.

    Install

    npm install next-restore-scroll

    How to use

    This package can be used in any React component, though I'd advise only using it once per project, and adding all scrollable elements to the second argument.

    _app.js:

    import restoreScrollPosition from 'next-restore-scroll'
    
    export default function App ({ Component, pageProps, router }) {
      restoreScrollPosition(router, '#scrolling-element')
      return (
        ...
      )
    }

    Anywhere else:

    import { useRouter } from 'next/router'
    import restoreScrollPosition from 'next-restore-scroll'
    
    export default function Layout () {
      const router = useRouter()
      restoreScrollPosition(router, '#scrolling-element')
      return (
        ...
      )
    }

    Examples

    Restore scroll position of one element :

    restoreScrollPosition(router, '#scrolling-wrapper')

    Restore scroll position of multiple elements:

    restoreScrollPosition(router, ['#scrolling-wrapper', '#scrolling-panel'])

    Restore scroll position of multiple elements retrieved with the same selector:

    restoreScrollPosition(router, '.scrolling-element', true)

    Restore scroll position of a mixture of elements:

    restoreScrollPosition(router, ['#scrolling-wrapper', '.scrolling-element', '.scrolling-box'], true)

    Syntax

    restoreScrollPosition(router, elementSelectors[, selectMultipleOfElement[, restoreOnNew]])
    router
    The next/router object. Can be retrieved with useRouter().
    elementSelectors
    String or string array. The CSS selectors for the scrolling element(s).
    selectMultipleOfElement (optional)
    Boolean, default is false. If true, querySelectorAll will be used, instead of querySelector, and multiple elements selected by the same selector will have their position restored, instead of just the first.
    restoreOnNew (optional)
    Boolean, default is false. When revisiting a page with a scroll position, without navigating via the back/forward buttons, restore the scroll position from history.

    Install

    npm i next-restore-scroll

    DownloadsWeekly Downloads

    33

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    34.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • ctnicholas