react how to scroll to element

Graceful Grasshopper answered on June 12, 2020 Popularity 10/10 Helpfulness 8/10

answer react how to scroll to element

related scroll to section react

related react how to scroll to element

react how to scroll to element

Comment

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> 
      </>
   )
}

Popularity 10/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: element javascript scroll

Link to this answer
Share Copy Link

Contributed on Jun 12 2020

Graceful Grasshopper

0 Answers Avg Quality 2/10

Closely Related Answers

scroll to section react

Comment

import React, { useRef } from 'react'

const scrollToRef = (ref) => window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })   
// General scroll to element function

const ScrollToSection = () => {

   const sectionRef = useRef(null)
   const executeSectionScroll = () => scrollToRef(myRef)

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

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 13 2022

Ozumah Ebenezer Ikechukwu

0 Answers Avg Quality 2/10

react how to scroll to element

Comment

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. 

}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: element

Link to this answer
Share Copy Link

Contributed on Jun 12 2020

Graceful Grasshopper

0 Answers Avg Quality 2/10

react how to scroll to element

Contents

More Related Answers

react how to scroll to element

Closely Related Answers

scroll to section react

react how to scroll to element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.