React modal scroll to top

Question

I have a modal with a long form in my react application. So when I submit the form I am showing the validation messages from the server on top of the form. So the user has to scroll to the top to view the messages. So I want to automatically scroll to the top when the message appears. So I added the below code in the submit handler function. But it is not working.

setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }])
                    window.scrollTo({
                        top: 0,
                        left: 0,
                        behavior: "smooth"
                      });

Answer 1

The other answers showed how you can scroll the modal to the top, and that is the generally accepted way of achieving this, though, I want to show you how to scroll the "Message" into view, regardless of whether it's on the top or not.

You would also need to create a ref to where you display your message and use the scrollIntoView functionality to scroll the modal to your validation message.

import React, { useRef } from 'react';

const Modal = () => {
  const validationMessageRef = useRef();

  const setAddModalErrorMsg = () => {
    // scrolls the validation message into view, and the block: 'nearest' ensures it scrolls the modal and not the window
    validationMessageRef.current?.scrollIntoView({ block:'nearest' });
  }

  return (
    <div>
      <div ref={validationMessageRef}>
        // your validation message is displayed here
      </div>

      // rest of your modal content here
    </div>

  )
}

Answer 2

You're trying to scroll window, but chances are your window is already at the top, it's your modal element that needs to scroll up.

To do this, i'd create a reference to the modal element, then in your function scroll the modal element via the ref, so something along the lines of:

import React, {useRef} from 'react';

const Modal = (props) => {
  // use the useRef hook to store a reference to the element
  const modalRef = useRef();
  
  const setAddModalErrorMsg = () => {
    // check the ref exists (it should always exist, it's declared in the JSX below), and call a regular javascript scrollTo function on it
    modalRef.current?.scrollTo({x: 0, y: 0, animated: false});
  }
  
  // see here we create a reference to the div that needs scrolled
  return (
    <div ref={modalRef}>
     { // your modal content }
    </div>
  )

}

Answer 3

to automatically scroll to the top we can use the below code:

  constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
    }

add the scrollTo function after setAddModalErrorMsg.

 setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }])
    this.myRef.current.scrollTo(0, 0);

 <div ref={this.myRef}></div> 

attach the ref property to a top dom element