{"id":22894077,"url":"https://github.com/being-devahmad/scrolltotop","last_synced_at":"2026-03-19T23:55:16.694Z","repository":{"id":257103148,"uuid":"857331407","full_name":"being-devahmad/scrollToTop","owner":"being-devahmad","description":"just code for scroll to top","archived":false,"fork":false,"pushed_at":"2024-09-14T11:24:13.000Z","size":5,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T01:31:55.053Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/being-devahmad.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":"2024-09-14T11:21:51.000Z","updated_at":"2024-09-21T17:38:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"31df6fce-906d-4818-b0f7-81d699b93492","html_url":"https://github.com/being-devahmad/scrollToTop","commit_stats":null,"previous_names":["being-devahmad/scrolltotop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/being-devahmad%2FscrollToTop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/being-devahmad%2FscrollToTop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/being-devahmad%2FscrollToTop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/being-devahmad%2FscrollToTop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/being-devahmad","download_url":"https://codeload.github.com/being-devahmad/scrollToTop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552972,"owners_count":20795835,"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","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-12-13T23:16:44.170Z","updated_at":"2026-01-08T14:51:16.232Z","avatar_url":"https://github.com/being-devahmad.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ScrollToTop Component\n\nThis is a React component that adds a \"Scroll to Top\" button to your web page. The button appears when the user scrolls down the page and allows them to quickly return to the top of the page with a smooth scrolling animation.\n\n## Features\n\n- Appears after scrolling down 300 pixels\n- Smooth scrolling animation\n- Responsive design\n- Customizable styling\n\n## Usage\n\nTo use this component in your React project, simply import it and add it to your main layout or any page where you want the scroll-to-top functionality.\n\n```jsx\nimport { useEffect, useState } from \"react\";\n\nexport default function ScrollToTop() {\n  const [isVisible, setIsVisible] = useState(false);\n\n  // Top: 0 takes us all the way back to the top of the page\n  // Behavior: smooth keeps it smooth!\n  const scrollToTop = () =\u003e {\n    window.scrollTo({\n      top: 0,\n      behavior: \"smooth\",\n    });\n  };\n\n  useEffect(() =\u003e {\n    // Button is displayed after scrolling for 500 pixels\n    const toggleVisibility = () =\u003e {\n      if (window.pageYOffset \u003e 300) {\n        setIsVisible(true);\n      } else {\n        setIsVisible(false);\n      }\n    };\n\n    window.addEventListener(\"scroll\", toggleVisibility);\n\n    return () =\u003e window.removeEventListener(\"scroll\", toggleVisibility);\n  }, []);\n\n  return (\n    \u003cdiv className=\"fixed bottom-8 right-8 z-[99]\"\u003e\n      {isVisible \u0026\u0026 (\n        \u003cdiv\n          onClick={scrollToTop}\n          aria-label=\"scroll to top\"\n          className=\"flex h-10 w-10 cursor-pointer items-center justify-center rounded-md bg-primary text-white shadow-md transition duration-300 ease-in-out hover:bg-opacity-80 hover:shadow-signUp\"\n        \u003e\n          \u003cspan className=\"mt-[6px] h-3 w-3 rotate-45 border-l border-t border-white\"\u003e\u003c/span\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeing-devahmad%2Fscrolltotop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeing-devahmad%2Fscrolltotop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeing-devahmad%2Fscrolltotop/lists"}