/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 vote336 views1 answer
Localhost server in react native
Javascript React
23 votes315 views6 answers
React native shadow
Javascript React
11 votes271 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
0 vote321 views1 answer
React native scrollview in modal
Javascript React
0 vote316 views1 answer
Hide urls in .env in react app
Javascript React
0 vote322 views1 answer
Adding js file to reactjs
Javascript React
2 votes300 views1 answer
React check if focused
Javascript React
0 vote323 views1 answer
How to get parent's ref react
Javascript React
3 votes291 views2 answers
React get data attribute from element
Javascript React
0 vote243 views1 answer
Ctx beginpath react
Javascript React