Opening modal causes body scroll top or bottom

I have an issue that wehever I open the modal the body is immediatelly scrolled to top or to bottom of the website. When the modal is closed the user is not in the place he/she opened the modal but either on the top or on the bottom of website.

I used following CSS to prevent parent element from scrolling (it allways causes the body scrolling top when modal is opened):

.ReactModal__Body--open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

When I try to use just overflow:hidden as recommended in readme.md it does not work for me - the parent element is still scrollable. When I try to use it without position: fixed as below:

.ReactModal__Body--open {
    overflow: hidden;
    width: 100%;
}

It always causes the body scroll bottom when modal is opened.

Skipping width: 100% causes the body content is shifted to the left if position: fixed is used as well.

[lydell]

Wild guess: Could it be that you have something like:

<a href="#" onClick={() => this.openModal()}>Open modal</a>

and forgot event.preventDefault()? (You could also use a <button>.)

<a href="#" onClick={event => {event.preventDefault(); this.openModal()}}>Open modal</a>

Edit: I think this is a duplicate of https://github.com/reactjs/react-modal/issues/117#issuecomment-333409035

[TheMangoTrain]

Just adding an outsider perspective. I’ve dealt with the OP’s problem (background jumps to top when opening modal) with vanilla JS modals and the culprit is often the <a href="#"> and how a browser deals with “#”.

Consider making your clickable element not <a>, perhaps a button or just a plain div with a listener. In any case, semantically, should an <a> be used for anything other than an actual link?