reactjs - How to scroll to the top of an MS Fluent UI modal using react

Question

I've created an SPFX webpart which displays a large modal. On smaller screens it will show the bottom half of the modal if scrolled down. I want the modal to have a button at the bottom so the user can click it to scroll to the top. I've read multiple conversations about how to scroll a window to the top but how to, with a Modal?

I am using the below to try to assign a modal to a variable (outside the class).

const modal = React.createRef();

export default class Eia extends React.Component<IEiaProps, any> {
  constructor(props) {
    super(props);
///

I've tried using this from the documentation:

export default class Eia extends React.Component<IEiaProps, any> {
  constructor(props) {
    super(props);
    //@ts-ignore
    this.myRef = React.createRef();
    this.state = {
   

But I have to force an ignore from TypeScript.

Here's the modal I'm using:

<Modal
  titleAriaId={this._titleId}
  subtitleAriaId={this._subtitleId}
  isOpen={this.state.showModal}
  onDismiss={this._closeModal}
  closeButtonAriaLabel={"Close"}
  isBlocking={true}
  containerClassName={styles.modalBody}
   //@ts-ignore
   ref={this.myRef}
 >

I suppose my question is, how to target the modal instead of the window and then force it to scroll to the top on a button press or automatically each render?

I've read this: How to set modal scroll to top when it appears in React.js

But is it really necessary to have to create a ref?

question from:https://stackoverflow.com/questions/66049000/how-to-scroll-to-the-top-of-an-ms-fluent-ui-modal-using-react

Answer 1

There is no way to do this using refs as far as I can tell, so I added an id to the top most div and ``` to allow the user to jump to the top. Happy to be wrong about the refs.