{"_id":"@algrith/scroll-to-top","_rev":"4-828786e6520eb9ae12ee99b632740579","name":"@algrith/scroll-to-top","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@algrith/scroll-to-top","version":"1.0.0","keywords":["Scroll to top","Back to top"],"author":{"name":"algrith"},"license":"MIT","_id":"@algrith/scroll-to-top@1.0.0","maintainers":[{"name":"astongemmy","email":"astongemmy@gmail.com"}],"homepage":"https://packages.algrith.com/scroll-to-top","bugs":{"url":"https://github.com/algrith/scroll-to-top/issues"},"dist":{"shasum":"23df739e6c29a9bc0af18c8f912fb4fa7b6c8c57","tarball":"https://registry.npmjs.org/@algrith/scroll-to-top/-/scroll-to-top-1.0.0.tgz","fileCount":25,"integrity":"sha512-yYn88Ak+jsTp6/vUNGajC4Au0tpQgu3g6zv4iWuel6W6wxx79vO+wkEfTEXA11CHo6CF7K/aTZbXZbsbeEbbQQ==","signatures":[{"sig":"MEQCIFWnpjUOpbn3hWBn4VzE803PRCHc8TZOo8jr9QpPlQ2EAiB3Jn75OAROBac6AK7FWHKzKUZGRm8BGr88or8qjfXLfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44852},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.ts","engines":{"node":"18.0.0 - 22.x.x"},"gitHead":"6891e8c124f88a12dbfba0f7fdc14d7e3d45f528","scripts":{"dev":"microbundle --css-modules true watch","build":"microbundle --css-modules true"},"_npmUser":{"name":"astongemmy","email":"astongemmy@gmail.com"},"repository":{"url":"git+https://github.com/algrith/scroll-to-top.git","type":"git"},"_npmVersion":"10.9.2","description":"A simple React Scoll-to-Top tool","directories":{"example":"examples"},"_nodeVersion":"21.7.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"ts-loader":"^9.5.1","typescript":"^5.7.2","@babel/core":"^7.26.0","microbundle":"^0.15.1","webpack-cli":"^5.1.4","@types/react":"^19.0.1","babel-loader":"^9.2.1","@types/react-dom":"^19.0.2","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"_npmOperationalInternal":{"tmp":"tmp/scroll-to-top_1.0.0_1734194714277_0.6628510820750249","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@algrith/scroll-to-top","version":"1.0.1","keywords":["Scroll to top","Back to top"],"author":{"url":"https://algrith-astongemmy.vercel.app","name":"Algrith LLC","email":"algrithllc@gmail.com"},"license":"MIT","_id":"@algrith/scroll-to-top@1.0.1","maintainers":[{"name":"astongemmy","email":"astongemmy@gmail.com"}],"homepage":"https://github.com/algrith/scroll-to-top","bugs":{"url":"https://github.com/algrith/scroll-to-top/issues"},"dist":{"shasum":"719f4bd24721e8ad94d3fa5ad88bb3f6afe046fb","tarball":"https://registry.npmjs.org/@algrith/scroll-to-top/-/scroll-to-top-1.0.1.tgz","fileCount":25,"integrity":"sha512-po7Xl247Bljt8rB0BsFBsndRt438947UhKyPcxjIX0SacKKo9zlOtZ2dFyfPrmOVwuqhlSGZnTThgyESkQI0UQ==","signatures":[{"sig":"MEUCIQCKN5h6wwE3hrMoaWVGO+LVuekenT8R3E0o+7kvv+5UoQIgPNCe4TkQGuFW57Jputabv4WmrggSny3yXgd2ZyAOeVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44760},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.ts","engines":{"node":"18.0.0 - 22.x.x"},"gitHead":"1f29c0ffcf6d9030fd07db57f1c4641ce4f4841e","scripts":{"dev":"microbundle --css-modules true watch","build":"microbundle --css-modules true"},"_npmUser":{"name":"astongemmy","email":"astongemmy@gmail.com"},"repository":{"url":"git+https://github.com/algrith/scroll-to-top.git","type":"git"},"_npmVersion":"10.9.2","description":"A lightweight utility function to smoothly scroll to the top of a web page, ideal for single-page applications or user-friendly navigation.","directories":{"example":"examples"},"_nodeVersion":"21.7.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"ts-loader":"^9.5.1","typescript":"^5.7.2","@babel/core":"^7.26.0","microbundle":"^0.15.1","webpack-cli":"^5.1.4","@types/react":"^19.0.1","babel-loader":"^9.2.1","@types/react-dom":"^19.0.2","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"_npmOperationalInternal":{"tmp":"tmp/scroll-to-top_1.0.1_1734337749010_0.2278087075516977","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@algrith/scroll-to-top","version":"1.0.2","keywords":["Scroll to top","Back to top"],"author":{"url":"https://algrith-astongemmy.vercel.app","name":"Algrith LLC","email":"algrithllc@gmail.com"},"license":"MIT","_id":"@algrith/scroll-to-top@1.0.2","maintainers":[{"name":"astongemmy","email":"astongemmy@gmail.com"}],"homepage":"https://github.com/algrith/scroll-to-top","bugs":{"url":"https://github.com/algrith/scroll-to-top/issues"},"dist":{"shasum":"1520bc108698a74f281ba71aae93eef288549247","tarball":"https://registry.npmjs.org/@algrith/scroll-to-top/-/scroll-to-top-1.0.2.tgz","fileCount":25,"integrity":"sha512-Dm+cqt60zVSJj+oQ36uvDEWa1JDOMq8AMhwzQOObm25/imBCbiVNviRSvMnI4BQD5w4agNLBWstsofKrEUw2yw==","signatures":[{"sig":"MEUCIQCsVgWbPWJZE3Tax/LhMb2Hh48JKX2YkbTaIqE64cFpXAIgQgLwkD+bIwwS9odDdePtl52DYnTk2qoxyRhJFYIB9Oo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":44670},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.ts","engines":{"node":"18.0.0 - 22.x.x"},"gitHead":"4b43ebac14bca771fa5e5881048bf4a9e2dc5c11","scripts":{"dev":"microbundle --css-modules true watch","build":"microbundle --css-modules true"},"_npmUser":{"name":"astongemmy","email":"astongemmy@gmail.com"},"repository":{"url":"git+https://github.com/algrith/scroll-to-top.git","type":"git"},"_npmVersion":"10.9.2","description":"A lightweight utility function to smoothly scroll to the top of a web page, ideal for single-page applications or user-friendly navigation.","directories":{"example":"examples"},"_nodeVersion":"21.7.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"ts-loader":"^9.5.1","typescript":"^5.7.2","@babel/core":"^7.26.0","microbundle":"^0.15.1","webpack-cli":"^5.1.4","@types/react":"^19.0.1","babel-loader":"^9.2.1","@types/react-dom":"^19.0.2","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"_npmOperationalInternal":{"tmp":"tmp/scroll-to-top_1.0.2_1734341353536_0.6211500799913738","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@algrith/scroll-to-top","version":"1.0.3","keywords":["Scroll to top","Back to top"],"author":{"url":"https://algrith-astongemmy.vercel.app","name":"Algrith LLC","email":"algrithllc@gmail.com"},"license":"MIT","_id":"@algrith/scroll-to-top@1.0.3","maintainers":[{"name":"astongemmy","email":"astongemmy@gmail.com"}],"homepage":"https://github.com/algrith/scroll-to-top","bugs":{"url":"https://github.com/algrith/scroll-to-top/issues"},"dist":{"shasum":"4d734538bac1d8f29af3b4316a60e0e327e7b88c","tarball":"https://registry.npmjs.org/@algrith/scroll-to-top/-/scroll-to-top-1.0.3.tgz","fileCount":18,"integrity":"sha512-Q1O1KI83UEDDQmdKhWKHCGeewXDdxt1FQAwuUQ5l1DboMv5NPlZDQyQfAJmUdbpHHhutAyjikC8aSbAxPP5czA==","signatures":[{"sig":"MEYCIQD2OaWkH/As2n7ECXQEMqEJjjgG+jPxp1LWdmULupcL6gIhALSUYzz7jU+Ctq2D1fzCEpxzBFWCFimWmziyUOoWfkdd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40614},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","unpkg":"dist/index.umd.js","module":"dist/index.module.js","source":"src/index.ts","engines":{"node":"18.0.0 - 22.x.x"},"gitHead":"9b69dbab614b626c90bf0165044b7518b7d6dc0c","scripts":{"dev":"microbundle --css-modules true watch","build":"microbundle --css-modules true"},"_npmUser":{"name":"astongemmy","email":"astongemmy@gmail.com"},"repository":{"url":"git+https://github.com/algrith/scroll-to-top.git","type":"git"},"_npmVersion":"10.9.2","description":"A lightweight utility function to smoothly scroll to the top of a web page, ideal for single-page applications or user-friendly navigation.","directories":{"example":"examples"},"_nodeVersion":"21.7.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ts-loader":"^9.5.1","typescript":"^5.7.2","@babel/core":"^7.26.0","microbundle":"^0.15.1","webpack-cli":"^5.1.4","@types/react":"^19.0.1","babel-loader":"^9.2.1","@types/react-dom":"^19.0.2","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"_npmOperationalInternal":{"tmp":"tmp/scroll-to-top_1.0.3_1734678682632_0.982500501287976","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"repository":{"url":"git+https://github.com/algrith/scroll-to-top.git","type":"git"},"homepage":"https://github.com/algrith/scroll-to-top","module":"dist/index.module.js","name":"@algrith/scroll-to-top","unpkg":"dist/index.umd.js","source":"src/index.ts","main":"dist/index.js","version":"1.0.4","type":"module","scripts":{"dev":"microbundle --css-modules true watch","build":"microbundle --css-modules true"},"devDependencies":{"@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3","@types/react":"^19.0.1","@types/react-dom":"^19.0.2","babel-loader":"^9.2.1","microbundle":"^0.15.1","ts-loader":"^9.5.1","typescript":"^5.7.2","webpack-cli":"^5.1.4"},"peerDependencies":{"react":">=16.9.0","react-dom":">=16.9.0"},"engines":{"node":"18.0.0 - 22.x.x"},"description":"A lightweight utility function to smoothly scroll to the top of a web page, ideal for single-page applications or user-friendly navigation.","directories":{"example":"examples"},"keywords":["Scroll to top","Back to top"],"author":{"name":"Algrith LLC","email":"algrithllc@gmail.com","url":"https://algrith-astongemmy.vercel.app"},"license":"MIT","types":"./dist/index.d.ts","bugs":{"url":"https://github.com/algrith/scroll-to-top/issues"},"publishConfig":{"access":"public"},"_id":"@algrith/scroll-to-top@1.0.4","gitHead":"ff65832a3c72983a43b383b954a20890622e881f","_nodeVersion":"21.7.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-+H7uvMeoZQuKp1ouUs9X6NZzYvG13q+K4LQ0ZB68vh6wIg5tcw19HvD2g/KIb8PEUbtqupxshO9UJ/ZrZDjx6w==","shasum":"ee3b8e97832488a8d5f0d2fa4a42cea1119a2605","tarball":"https://registry.npmjs.org/@algrith/scroll-to-top/-/scroll-to-top-1.0.4.tgz","fileCount":18,"unpackedSize":40665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPjuoDEbahKWmshb99xIvUuFq1MwjK/+wcJi8xzi05/AiBWZt4BzUy7OHRr8LA6aw/90ezwcLACluRqjfnw+jKWAA=="}]},"_npmUser":{"name":"astongemmy","email":"astongemmy@gmail.com"},"maintainers":[{"name":"astongemmy","email":"astongemmy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/scroll-to-top_1.0.4_1734679254898_0.3682481930920376"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-14T16:45:14.164Z","modified":"2024-12-20T07:20:55.326Z","1.0.0":"2024-12-14T16:45:14.516Z","1.0.1":"2024-12-16T08:29:09.177Z","1.0.2":"2024-12-16T09:29:13.722Z","1.0.3":"2024-12-20T07:11:22.874Z","1.0.4":"2024-12-20T07:20:55.125Z"},"bugs":{"url":"https://github.com/algrith/scroll-to-top/issues"},"author":{"name":"Algrith LLC","email":"algrithllc@gmail.com","url":"https://algrith-astongemmy.vercel.app"},"license":"MIT","homepage":"https://github.com/algrith/scroll-to-top","keywords":["Scroll to top","Back to top"],"repository":{"url":"git+https://github.com/algrith/scroll-to-top.git","type":"git"},"description":"A lightweight utility function to smoothly scroll to the top of a web page, ideal for single-page applications or user-friendly navigation.","maintainers":[{"name":"astongemmy","email":"astongemmy@gmail.com"}],"readme":"<!-- <a href=\"https://scroll-to-top.com\" target=\"_blank\" rel=\"noopener\">\n  <picture>\n    <source media=\"(prefers-color-scheme: dark)\" alt=\"React Scroll To Top\" srcset=\"https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png\" />\n    <img alt=\"Excalidraw\" src=\"https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2.png\" />\n  </picture>\n</a> -->\n\n<h4 align=\"center\">\n  <a href=\"#\">Algrith Scroll To Top</a>\n</h4>\n\n<div align=\"center\">\n  <h2>\n    A lightweight utility function to smoothly scroll to the top of a web page, ideal for single-page React applications or user-friendly navigation.\n  </h2>\n</div>\n\n<br />\n<p align=\"center\">\n  <a href=\"https://github.com/astongemmy/scroll-to-top/main/LICENSE\">\n    <img alt=\"Algrith Scroll To Top is released under the MIT license.\" src=\"https://img.shields.io/badge/license-MIT-blue.svg\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@algrith/scroll-to-top\">\n    <img alt=\"npm downloads/month\" src=\"https://img.shields.io/npm/dm/@algrith/scroll-to-top\" />\n  </a>\n</p>\n\n## Features\n\nThe Algrith Scroll To Top supports:\n\n- 🕹️&nbsp;Usage with built-in controller component.\n- 🪝&nbsp;Direct usage with exposed hook method.\n- 🪝🔍&nbsp;Usage with hook & ref/query selector.\n\n## Quick start\n\n```\nnpm install @algrith/scroll-to-top\n```\n\nor via yarn\n\n```\nyarn add @algrith/scroll-to-top\n```\n\n## Usage & Examples\n\nCurrently, there is an implemented usage for all available methods for [NextJs (Using page router) example](https://github.com/algrith/scroll-to-top/tree/main/examples/with-nextjs).\n\n### Usage with built-in controller component.\n\nTo use the built in controller, just import and use the controller component in your root layout/page component file.\n\n```javascript\nimport { ScrollToTopController } from '@algrith/scroll-to-top';\n\nconst ScrollToTopWithController = () => {\n  return (\n    <div>\n      <h2>Using Controller Component (Check bottom-right corner)</h2>\n      <ScrollToTopController />\n    </div>\n  );\n};\n\nexport default ScrollToTopWithController;\n```\n\nIf you wish to use the default styled controller, then you must also import the css files in your component file.\n\n```javascript\nimport '@algrith/scroll-to-top/dist/index.css';\n```\n\n### Direct usage with exposed hook method.\n\nYou could also attach the `scrollToTop` hook method to the `onClick` event handler of any desired element/component in your file and everything would work just the same.\n\n**Note:** This doesn't require any extra config on the hook method or css import.\n\n```javascript\nimport { useScrollToTop } from '@algrith/scroll-to-top';\n\nconst ScrollToTopWithHook = () => {\n  const scrollToTop = useScrollToTop();\n  \n  return (\n    <div>\n      <h1>Using Exported Method</h1>\n      <button onClick={scrollToTop} type=\"button\">Scroll to Top</button>\n    </div>\n  );\n};\n\nexport default ScrollToTopWithHook;\n```\n\n### Usage with hook & ref/query selector.\n\nYou could also decide to use a custom component/element with `ref` or query selector. The choice is yours.\n\n####  With ref\n\n```javascript\nimport { useScrollToTop } from '@algrith/scroll-to-top';\nimport { useRef } from 'react';\n\nconst ScrollToTopWithHookAndRef = () => {\n  const controllerRef = useRef(null);\n  useScrollToTop({ controllerRef });\n  \n  return (\n    <div>\n      <h1>Using Hook and Ref</h1>\n      <button ref={controllerRef} type=\"button\">Scroll to Top</button>\n    </div>\n  );\n};\n\nexport default ScrollToTopWithHookAndRef;\n```\n\n####  With query selector\n\n```javascript\nimport { useScrollToTop } from '@algrith/scroll-to-top';\n\nconst ScrollToTopWithHookAndSelector = () => {\n  useScrollToTop({ selector: `#scroll-to-top` });\n  \n  return (\n    <div>\n      <h1>Using Hook and Selector</h1>\n      <button id=\"scroll-to-top\" type=\"button\">Scroll to Top</button>\n    </div>\n  );\n};\n\nexport default ScrollToTopWithHookAndSelector;\n```\n\n##  TypeScript Support\n\nTypes files can be found at https://github.com/algrith/scroll-to-top/tree/main/src/types.\n\n## Contributing\n\n- Missing something or found a bug? [Report here](https://github.com/algrith/scroll-to-top/issues).","readmeFilename":"README.md"}