/Javascript/React/How to scroll to an element javascript react

How to scroll to an element javascript react

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

How to scroll to an element javascript react

import { scroller } from "react-scroll";

// excluded React component syntax...

  scrollToSection = () => {
    scroller.scrollTo("your_css_class_here", {
      duration: 800,
      delay: 0,
      smooth: "easeInOutQuart",
    });
  };

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 vote308 views1 answer
Using redux on react extension
Javascript React
0 vote308 views1 answer
Tailwind intenseness react
Javascript React
1 vote321 views1 answer
Scale text in div react
Javascript React
5 votes360 views3 answers
Linear gradient css react js
Javascript React
23 votes302 views2 answers
Create-react-app npm yarn
Javascript React
0 vote310 views1 answer
External js doesn't works if revisit the page in react
Javascript React
0 vote330 views1 answer
Text input placeholder font family react native
Javascript React
68 votes313 views3 answers
React add inline styles in react
Javascript React
18 votes265 views6 answers
Add svg in react
Javascript React
14 votes293 views2 answers
Photo in React native
Javascript React