Breaking News: Grepper is joining You.com. Read the official announcement!

scroll to section react

Ozumah Ebenezer Ikechukwu answered on June 12, 2020 Popularity 9/10 Helpfulness 5/10

answer scroll to section react

related react how to scroll to element

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 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript scroll

Link to this answer
Share Copy Link

Contributed on Jun 13 2022

Ozumah Ebenezer Ikechukwu

0 Answers Avg Quality 2/10

Closely Related Answers

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

Link to this answer
Share Copy Link

Contributed on Jun 12 2020

Graceful Grasshopper

0 Answers Avg Quality 2/10

react link scroll to section

Comment

import { HashLink } from 'react-router-hash-link';

<HashLink smooth to="/path#hash">
  Link to Hash Fragment
</HashLink>;

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 28 2022

Pankaj dev

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

scroll to section react

Contents

More Related Answers

scroll to section react

Closely Related Answers

react how to scroll to element

react link scroll to section

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.