/Javascript/React/React how to scroll to element

React how to scroll to element

import React, { useRef } from 'react'

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)   
// General scroll to element function

const ScrollDemo = () => {

   const myRef = useRef(null)
   const executeScroll = () => scrollToRef(myRef)

   return (
      <> 
         <div ref={myRef}>I wanna be seen</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

Source: stackoverflow.com

React how to scroll to element

class ReadyToScroll extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}></div> 
    }  

    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)   
    // run this method to execute scrolling. 

}

Source: stackoverflow.com

Similar codes

0 vote254 views1 answer
React password hashing
Javascript React
6 votes198 views2 answers
React native socket io
Javascript React
0 vote226 views1 answer
Reactjs cant find serviceWorker.js file in app src folder
Javascript React
2 votes224 views2 answers
Chrome back button click event react
Javascript React
1 vote248 views1 answer
Could not find com.yqritc:android-scalablevideoview:1.0.4 react native video
Javascript React
2 votes226 views1 answer
React native socket io
Javascript React
18 votes285 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
133 votes341 views6 answers
Create react project
Javascript React
4 votes233 views2 answers
Onitemclick react
Javascript React
0 vote236 views1 answer
Failed to construct image react-native
Javascript React