How to add Scroll to top in react

Question

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;

React is just JavaScript. Not everything has to be done the "React way". — isherwood
– isherwood, Commented Aug 20, 2019 at 12:55

Dupocas · Accepted Answer · 2019-08-20 12:58:01Z

10

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;

answered Aug 20, 2019 at 12:58

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taxel Over a year ago

The component is stateless, so a function component will do: function ScrollTop(){return(<div ... />)}

Mohammed Al-Reai · Accepted Answer · 2019-08-20 13:10:14Z

2

may be use this function

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

}

answered Aug 20, 2019 at 13:10

Mohammed Al-Reai

2,85617 silver badges19 bronze badges

Comments

General Grievance · Accepted Answer · 2023-05-01 12:36:30Z

0

Before this code, you must install react-router.
npm i react-router-dom

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function scrollTop() {
    const { pathname } = useLocation();

    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname])

    return null;
}

edited May 1, 2023 at 12:36

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Apr 27, 2023 at 4:55

Marouf

14 bronze badges

Comments

General Grievance · Accepted Answer · 2023-05-01 12:36:54Z

0

Install react-scroll from https://www.npmjs.com/package/react-scroll
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>

Click on the element(here Logo) to see the magic.

edited May 1, 2023 at 12:36

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered Oct 21, 2021 at 10:53

Partha Roy

211 bronze badge

Collectives™ on Stack Overflow

How to add Scroll to top in react

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related