React Modal resets x axis scroll bar once opened

[bjb118]

Right now whenever my modal closes, it scrolls all the way left and does not return to the original div that called it. Ive tried every api callback and every react lifecycle method, and nothing works. However, if i use scrollIntoView in the terminal, it works just fine.

Steps to Reproduce:

1. Go to http://www.arabisraeliconflictmadesimple.com/timeline
2. press options, UN
3. scroll right to 1967
4. press on "UN security resolution 242"
5. Notice that we are back to 1947

Here's my component that calls the modals

import React, {Component} from 'react'
import $ from 'jquery'
import Modal from 'react-responsive-modal'

class InfoSquare extends Component {
	constructor(props) {
		super(props)
		this.state = {
		    open: false,
		  };
	}

	onOpenModal() {
		if (this.props.modal_info)
			this.setState({ open: true });
	}

	scrollBack() {
		let to_return = document.getElementById(`${this.props.year}`)
		to_return.scrollIntoView();
	}

	onCloseModal() {
		this.setState({ open: false });
	}

	render(props) {
		const { open } = this.state;
		return (
			<div>
      			<p className={`${this.props.indicator}-text`} onClick={this.onOpenModal.bind(this)} >{this.props.text}</p>   			
      			<Modal open={open} onClose={this.onCloseModal.bind(this)} onAfterOpen={this.scrollBack} little>
      				<h4>{this.props.text}</h4>
		        	{this.props.modal_info && 
		          		this.props.modal_info.map(info => <p key={info}>{info}</p>)
		          	}
		        </Modal>
      		</div>
		);
	}
}

export default InfoSquare;