Brtdku

Just find the top position of the element you've already determined https://www.w3schools.com/Jsref/prop_element_offsettop.asp then scroll to this position via scrollTo method https://www.w3schools.com/Jsref/met_win_scrollto.asp

Something like this should work:

handleScrollToElement(event) {

  const tesNode = ReactDOM.findDOMNode(this.refs.test)

  if (some_logic){

    window.scrollTo(0, tesNode.offsetTop);

  }

}



render() {



  return (

    <div>

      <div ref="test"></div>

    </div>)

}

UPDATE:

since React v16.3 the React.createRef() is preferred

constructor(props) {

  super(props);

  this.myRef = React.createRef();

}



handleScrollToElement(event) {

  if (<some_logic>){

    window.scrollTo(0, this.myRef.current.offsetTop);

  }

}



render() {



  return (

    <div>

      <div ref={this.myRef}></div>

    </div>)

}

Using findDOMNode is going to be deprecated eventually.

The preferred method is to use callback refs.

github eslint

You can also use scrollIntoView method to scroll to a given element.

handleScrollToElement(event) {

const tesNode = ReactDOM.findDOMNode(this.refs.test)

 if (some_logic){

  tesNode.scrollIntoView();

  }

 }



 render() {

  return (

   <div>

     <div ref="test"></div>

   </div>)

}

You could try this way:

 handleScrollToElement = e => {

    const elementTop = this.gate.offsetTop;

    window.scrollTo(0, elementTop);

 };



 render(){

  return(

      <h2 ref={elem => (this.gate = elem)}>Payment gate</h2>

 )}

this worked for me

this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })

You can use something like componentDidUpdate

componentDidUpdate() {

  var elem = testNode //your ref to the element say testNode in your case; 

  elem.scrollTop = elem.scrollHeight;

};

I might be late to the party but I was trying to implement dynamic refs to my project the proper way and all the answer I have found until know aren't quiet satisfying to my liking, so I came up with a solution that I think is simple and uses the native and recommended way of react to create the ref.

sometimes you find that the way documentation is wrote assumes that you have a known amount of views and in most cases this number is unknown so you need a way to solve the problem in this case, create dynamic refs to the unknown number of views you need to show in the class

so the most simple solution i could think of and worked flawlessly was to do as follows

class YourClass extends component {



state={

 foo:"bar",

 dynamicViews:,

 myData: //get some data from the web

}



inputRef = React.createRef()



componentDidMount(){

  this.createViews()

}





createViews = ()=>{

const trs=

for (let i = 1; i < this.state.myData.lenght; i++) {



let ref =`myrefRow ${i}`



this[ref]= React.createRef()



  const row = (

  <tr ref={this[ref]}>

<td>

  `myRow ${i}`

</td>

</tr>

)

trs.push(row)



}

this.setState({dynamicViews:trs})

}



clickHandler = ()=>{



//const scrollToView = this.inputRef.current.value

//That to select the value of the inputbox bt for demostrate the //example



value=`myrefRow ${30}`



  this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });

}





render(){



return(

<div style={{display:"flex", flexDirection:"column"}}>

<Button onClick={this.clickHandler}> Search</Button>

<input ref={this.inputRef}/>

<table>

<tbody>

{this.state.dynamicViews}

<tbody>

<table>

</div>





)



}



}



export default YourClass

that way the scroll will go to whatever row you are looking for..

cheers and hope it helps others

What worked for me:

class MyComponent extends Component {

    constructor(props) {

        super(props);

        this.myRef = React.createRef(); // Create a ref    

    }



    // Scroll to ref function

    scrollToMyRef = () => {

        window.scrollTo({

            top:this.myRef.offsetTop, 

            // behavior: "smooth" // optional

        });

    };



    // On component mount, scroll to ref

    componentDidMount() {

        this.scrollToMyRef();

    }



    // Render method. Note, that `div` element got `ref`.

    render() {

        return (

            <div ref={this.myRef}>My component</div>

        )

    }

}