Navigation Links Do Not Scroll Page to Top on Click

[rahul12075]

Describe the bug

When users are at the bottom of the page and click on any navigation link in the header (e.g., Home, Schemes, Dashboard, Grievances, Contact), the page does not automatically scroll back to the top. Instead, it loads the new content but remains positioned at the bottom of the screen, leading to poor navigation experience and usability issues.

To Reproduce

1. Scroll down to the bottom of the page.
2. Click on any navigation link in the top navigation bar (e.g., Schemes or Dashboard).
3. Observe that the screen remains at the bottom instead of scrolling back to the top.

Expected behavior

On clicking any navigation link, the page should:

• Load the respective section/page.
• Automatically scroll to the top of the page to give users a clear view of the new content.

Actual Behavior:

The page loads the new section but remains at the bottom of the viewport.

Suggested Fix:

Implement an automatic scroll-to-top behavior when navigation links are clicked. This can be done using:

1. JavaScript window.scrollTo(0,0) on route change, or
2. Router configuration (e.g., React Router’s useEffect with scroll reset).

Additional Context:

Please assign me this issue. @eccentriccoder01

[eccentriccoder01]

Great observation @rahul12075, thanks for the clear description! Just make sure to:
 

• Stay updated by fetching changes from the upstream in your local repo, as multiple people are constantly updating the main.
• Include relevant screenshots/info in the PR.
• Reach out in case of any doubts...
   
  Assigning this issue to you, 3 days for this. All the best👍🏻

[Krishna-Sri-Charan]

@eccentriccoder01 the current assignee took enough time to solve this issue, kindly please assign me

[eccentriccoder01]

@Krishna-Sri-Charan Go ahead!