{"id":18277726,"url":"https://github.com/ctnicholas/next-restore-scroll","last_synced_at":"2026-03-05T00:03:11.932Z","repository":{"id":128690181,"uuid":"370401714","full_name":"CTNicholas/next-restore-scroll","owner":"CTNicholas","description":"A fix for restoring scroll position with Next Router when the body element is not used as the main scrolling element.","archived":false,"fork":false,"pushed_at":"2021-08-16T10:29:10.000Z","size":74,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-24T21:08:34.123Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CTNicholas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-24T15:34:56.000Z","updated_at":"2022-09-02T17:41:44.000Z","dependencies_parsed_at":"2023-05-22T17:30:52.864Z","dependency_job_id":null,"html_url":"https://github.com/CTNicholas/next-restore-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CTNicholas/next-restore-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fnext-restore-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fnext-restore-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fnext-restore-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fnext-restore-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CTNicholas","download_url":"https://codeload.github.com/CTNicholas/next-restore-scroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fnext-restore-scroll/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266590758,"owners_count":23952995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T12:20:24.618Z","updated_at":"2025-09-23T13:38:12.624Z","avatar_url":"https://github.com/CTNicholas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-restore-scroll\n\nAfter switching routes in [Next.js](https://github.com/vercel/next.js/), via the forward and back buttons, the scroll position can be lost. This is often\nbecause only the body tag will have its position restored, and sometimes the main scrolling window is another\nelement. 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.\n\n### How it works\n\n`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.\n\n## Install\n\n```shell\nnpm install next-restore-scroll\n```\n\n## How to use\n\nThis 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.\n\n_app.js:\n\n```jsx\nimport restoreScrollPosition from 'next-restore-scroll'\n\nexport default function App ({ Component, pageProps, router }) {\n  restoreScrollPosition(router, '#scrolling-element')\n  return (\n    ...\n  )\n}\n```\n\nAnywhere else:\n\n```jsx\nimport { useRouter } from 'next/router'\nimport restoreScrollPosition from 'next-restore-scroll'\n\nexport default function Layout () {\n  const router = useRouter()\n  restoreScrollPosition(router, '#scrolling-element')\n  return (\n    ...\n  )\n}\n```\n\n### Examples\n\nRestore scroll position of one element :\n\n```js\nrestoreScrollPosition(router, '#scrolling-wrapper')\n```\n\nRestore scroll position of multiple elements:\n\n```js\nrestoreScrollPosition(router, ['#scrolling-wrapper', '#scrolling-panel'])\n```\n\nRestore scroll position of multiple elements retrieved with the same selector:\n\n```js\nrestoreScrollPosition(router, '.scrolling-element', true)\n```\n\nRestore scroll position of a mixture of elements:\n\n```js\nrestoreScrollPosition(router, ['#scrolling-wrapper', '.scrolling-element', '.scrolling-box'], true)\n```\n\n### Syntax\n\n```js\nrestoreScrollPosition(router, elementSelectors[, selectMultipleOfElement[, restoreOnNew]])\n```\n\n\u003cdl\u003e\n  \u003cdt\u003erouter\u003c/dt\u003e\n  \u003cdd\u003eThe next/router object. Can be retrieved with useRouter().\u003c/dd\u003e\n  \u003cdt\u003eelementSelectors\u003c/dt\u003e\n  \u003cdd\u003eString or string array. The CSS selectors for the scrolling element(s).\u003c/dd\u003e\n  \u003cdt\u003eselectMultipleOfElement (optional)\u003c/dt\u003e\n  \u003cdd\u003eBoolean, 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.\u003c/dd\u003e\n  \u003cdt\u003erestoreOnNew (optional)\u003c/dt\u003e\n  \u003cdd\u003eBoolean, default is false. When revisiting a page with a scroll position, without navigating via the back/forward buttons, restore the scroll position from history.\u003c/dd\u003e\n\n\u003c/dl\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctnicholas%2Fnext-restore-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctnicholas%2Fnext-restore-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctnicholas%2Fnext-restore-scroll/lists"}