如何解决反应自动滚动问题？

Question

I am using react to create my project. The issue I am having is if I scroll to any page and then to go another page I end up in the same place on the top of the page. How can I fix this issue?

Answer 1

you can use Window.scrollTo or element.scrollIntoView function to resolve the problem

 useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

or if you want scroll behavior

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

but this is not the best way to do it in every component so you can use custom hooks to implement and use it everywhere

import react, { useEffect } from "react";

const useTop = function () {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
};

export default useTop;

click to view demo

let's figure it out of the element.scrollIntoView function and the use case if we need to scroll to an element but we don't know the height and width of the element from the viewport so that's why we just use element.scrollIntoView function to resolve that. we can manually calculate the height and width of the element from the viewport using the element.getBoundingClientReact function but we need a lot of boilerplate code needed to implement

with the use of custom, hooks can use scroll events whenever we needed

const useTop = function () {
      const scroll = (ref) => {
        ref.current.scrollIntoView({ behaviour: "smooth" });
      };
    
      return { scroll };
    };
    
    export default useTop;

click to view demo

Answer 2

Try this:

componentDidMount() {
window.scrollTo(0, 0)
}

useEffect(() => {
window.scrollTo(0, 0)
}, [])