Scroll to top in Reactjs-CodePudding

Hi all I have following code.

I am trying to scroll top, after every step.

I tried this

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

and even this

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

But it didn't help in my case.

here is my code: index.js file

    const App = () => {
      return (
        <div className="layout">
          <div className="imageContainer">
            <img src="http://imageipsum.com/800x600" />
          </div>
          <div className="steps">
            <Layout />
          </div>
        </div>
      );
    };

Layout.js file

    const Layout = () => {
     const [current, setCurrent] = React.useState(0);

     const steps = [
     {
      title: 'First',
      content: <First setCurrent={setCurrent} />,
     },
     {
      title: 'Second',
      content: <Second setCurrent={setCurrent} />,
     },
     {
      title: 'Last',
      content: <Third setCurrent={setCurrent} />,
     },
     ];

    return (
      <>
        {steps[current].content}
        <div className="steps-action"></div>
      </>
     );
    };

First.js file (Second.js and Third.js file are same)

    const First = ({ setCurrent }) => {
      return (
        <>
          <div className="steps-content">
          <div>First</div>
          <div>First</div>
           ...
          <div>First</div>
         </div>
         <button
           onClick={() => {
              setCurrent(1);
             window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
          >
            Next
          </button>
        </>
      );
    };

and also css file

    .steps-content {
      text-align: center;
      background-color: #fafafa;
     }
    .layout {
      display: flex;
      grid-template-columns: 40% 60%;
     }
    .layout img {
      width: 100%;
      height: 100vh;
      object-fit: contain;
     }
    .imageContainer {
       background-color: aqua;
     }
    .steps {
      padding: 5.8rem 6.4rem;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
     }

      .steps::-webkit-scrollbar-track {
         border: 1px solid rgba(0, 0, 0, 0.158);
         padding: 2px 0;
         background-color: #40404031;
     }

    .steps::-webkit-scrollbar {
      width: 0.5rem;
      }

    .steps::-webkit-scrollbar-thumb {
      border-radius: 0.5rem;
      background-color: #737272a6;
      }

Be noticed when I am removing the overflow-y: auto; and overflow-x: hidden; the scroll top functionality starting to work. But I need that overflow-y: auto; and overflow-x: hidden; line because I am changing the styles of that scroll bar. Please help me to fix that problem, thаnks.

CodePudding user response：

Modify your useEffect function

useEffect(() => {

 setTimeout(() => {
 window.scrollTo(0, 0)
 }, 2000); 

 }, [])

You can increase the settimeout() function time according to your browser behaviour..

or the time it takes.... try different milliseconds values

CodePudding user response：

I find the solution

This post helps me.

I add the following to my code.

     const myRef = useRef(null);
       myRef?.current?.scrollIntoView({ block: 'end', behavior: 'smooth' });

    return (
       <>
         <div ref={myRef}></div>
         {steps[current].content}
      </>
    );