{"id":10085,"date":"2024-04-16T04:24:57","date_gmt":"2024-04-16T04:24:57","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=10085"},"modified":"2024-04-16T04:24:57","modified_gmt":"2024-04-16T04:24:57","slug":"reactjs-scroll-to-top","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/reactjs-scroll-to-top","title":{"rendered":"ReactJS Scrolling to Top Doesn’t Work After Rendering"},"content":{"rendered":"

Solution 1: Using useEffect Hook (React Router v5 or below)<\/h3>\n

To use this functionality, ensure that the ScrollToTop<\/strong> component is included as a sibling to the BrowserRouter<\/strong> component. This setup allows the ScrollToTop component to receive the history object and respond to route changes accordingly. Ensure that you wrap your main component with BrowserRouter to ensure the proper functioning of the components.<\/p>\n

Here’s an example of integrating it into your main component:<\/p>\n

\r\nScrollToTop.js\r\n\r\nimport React, { useEffect } from 'react';\r\nconst ScrollToTop = () => {\r\n  useEffect(() => {\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n  }, []); \/\/ Empty dependency array to run only on mount\r\n\r\n  return null; \/\/ This component doesn't render anything\r\n};\r\n\r\nApp.js\r\n\r\nimport React from 'react';\r\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\r\nimport ScrollToTop from '.\/ScrollToTop';\r\n\r\nconst App = () => {\r\n  return (\r\n    <Router>\r\n      <ScrollToTop \/>\r\n      <Switch>\r\n        {\/* Your application routes here *\/}\r\n      <\/Switch>\r\n    <\/Router>\r\n  );\r\n};\r\n<\/pre>\n
With this setup, every time the route changes, the ScrollToTop component will smoothly scroll the window to the top.<\/p>\n
Solution 2: Using react-router v6+ ScrollRestoration component<\/h3>\n
If you’re using React Router v6 or later, there’s a built-in  component that automatically handles this behavior. Simply include it within your Router component. Here’s an example of integrating it into your component:<\/p>\n
\r\nimport { ScrollRestoration } from \"react-router-dom\";\r\nfunction RootRouteComponent() {\r\n  return (\r\n    
\r\n      {\/* ... *\/}\r\n      \r\n    <\/div>\r\n  );\r\n}\r\n<\/pre>\n
For further details, you can refer to the official documentation here<\/a>.<\/p>\n
Solution 3: Utilizing react-scroll Library<\/h3>\n
While the previous approach utilized the built-in window.scrollTo method, you can also achieve smooth scrolling with a third-party library like react-scroll<\/strong>. Here’s how to adapt the ScrollIntoView component to leverage react-scroll:<\/p>\n
\r\nimport React, { useEffect } from 'react';\r\nimport { animateScroll as scroll } from 'react-scroll';\r\nimport { withRouter } from 'react-router';\r\n\r\nconst ScrollIntoView = ({ children, location }) => {\r\n  useEffect(() => {\r\n    if (location) { \/\/ Ensure location prop is available\r\n      scroll.scrollToTop({\r\n        duration: 500,\r\n        smooth: 'easeInOutQuint',\r\n      });\r\n    }\r\n  }, [location]); \/\/ Run effect when location prop changes\r\n\r\n  return children;\r\n};\r\nexport default withRouter(ScrollIntoView);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Solution 1: Using useEffect Hook (React Router v5 or below) To use this functionality, ensure that the ScrollToTop component is included as a sibling to the BrowserRouter component. This setup allows the ScrollToTop component to receive the history object and respond to route changes accordingly. Ensure that you wrap your main component with BrowserRouter to […]<\/p>\n","protected":false},"author":1,"featured_media":10086,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10085"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=10085"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10085\/revisions"}],"predecessor-version":[{"id":10090,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10085\/revisions\/10090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/10086"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=10085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=10085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=10085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}