Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

203
Vistas
React modal scroll to top

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"
                      });
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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

}
about 4 years ago · Juan Pablo Isaza Denunciar

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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>

  )
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda