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"
                      });

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"
                      });

• javascript
• reactjs
• scroll
• bootstrap-modal

Share Improve this question Follow asked Mar 2, 2022 at 10:25 AkhileshAkhilesh 1,30355 gold badges2020 silver badges5757 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

  )
}

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

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>
  )

}