Source:  Twitter logo

I am adding the Scroll to top div in Footer section. After clicking on the scroll top icon it will go the top of page

After Clicking on the Scroll to top it will go the top of page

Here is my code

import React from 'react';

class ScrollTop extends React.Component {
    render() {
        return (
            <div className="scrolltop">
                <i className="fa fa-angle-up" />
            </div>
        );
    }
}

export default ScrollTop;

Just use vanilla javascript

import React from 'react';

class ScrollTop extends React.Component {
    render() {
        return (
            <div className="scrolltop" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
                <i className="fa fa-angle-up" />
            </div>
        );
    }
}

export default ScrollTop;
10 users liked answer #0dislike answer #010
Dupocas profile pic
Dupocas

may be use this function

handleScroll=()=>{
    window.scrollX(0);
    // or 
    window.scroll({top:0,behavior:'smooth'})

}
2 users liked answer #1dislike answer #12
Mohammed Al-Reai profile pic
Mohammed Al-Reai
  1. Install react-scroll from https://www.npmjs.com/package/react-scroll

  2. Import and use in your component like below(ES6 style):

import { Link, animateScroll as scroll } from "react-scroll";

<Link 
to="/" 
className='someDiv'
onClick={()=>scroll.scrollToTop()}>
Logo
</Link>
  1. Click on the element(here Logo) to see the magic.
0 users liked answer #2dislike answer #20
Partha Roy profile pic
Partha Roy

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).