Adding scroll to top button is not working with react?

Question

Problem:

I am very new to react stuff. I am creating a web application. In there I have implemented a way scroll to top like this way.

import React, { PureComponent } from "react";
import "../../../assets/css/bootstrap.min.css";
import "../../../assets/css/demo.css";
import "../../../assets/css/light-bootstrap-dashboard.css";
import "../../../assets/css/font-awesome-min.css";
import "../../../assets/css/fonts.css";
import "../../../assets/css/dashbord.css";
import Sidebar from "../Templates/Sidebar";
import Header from "../Templates/Header";
import Footer from "../Templates/Footer";
import Dashbordcards from "./Dashbordcards";
import Graphs from "./Graphs/Graphs";
import ActivityFeed from "./ActivityFeed";
import { Row, Col, Button } from "react-bootstrap";

class Dashboard extends PureComponent {
  componentDidMount() {
    window.addEventListener("scroll", this.handeleScroll());
  }

  handeleScroll() {
    if (
      document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20
    ) {
      document.getElementById("myBtn").style.display = "block";
    } else {
      document.getElementById("myBtn").style.display = "none";
    }
  }

  topFunction(){
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }

  render() {
    return (
      <div className="wrapper">
        <Button onclick={this.topFunction} id="myBtn" title="Go to top">
          Top
        </Button>
        <div className="sidebar-background">
          <Sidebar />
        </div>
        <div className="main-panel">
          <Header name="Dashbord" />
          <div class="content">
            <Dashbordcards />
            <Graphs />
            <ActivityFeed />
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

export default Dashboard;

But it is not working as expected. I tried so many examples in the stack overflow and the examples that I found through google searches. But those were not able to full fill my requirement. Can someone help me to solve this problem by modifying my code and make it workable? Thank you very much!

Kevin Bai · Accepted Answer · 2018-11-25 02:47:51Z

3

Instead of document.body.scroll, you can use window.pageYOffset get the current scroll position of the page.

To scroll to the top, use: window.scrollTo(0,0).

If you want to scroll with a smooth behaviour, you can use: window.scrollTo({top: 0, behavior: "smooth"}).

answered Nov 25, 2018 at 2:47

Kevin Bai

6411 gold badge5 silver badges9 bronze badges

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

2 Comments

dwp Over a year ago

Inside handeleScroll function when I console.log(pageYOffset it prints 0. It is not updating when I start to scroll how can I solve this problem.

Kevin Bai Over a year ago

See the answer from @Dinesh Pandiyan. That will fix the update problem.

Dinesh Pandiyan · Accepted Answer · 2018-11-25 04:22:52Z

1

You need to fix a couple of things in your code.

1. Pass scroll handler the right way

Change this

componentDidMount() {
  window.addEventListener("scroll", this.handeleScroll());
}

to

componentDidMount() {
  window.addEventListener("scroll", this.handeleScroll); // remove brackets ()
}

2. Add `componentWillUnmount` lifecycle method

Event listeners should be added in componentDidMount and removed in componentWillUnmount

componentWillUnmount() {
    window.removeEventListener("scroll", this.handeleScroll);
}

3. `onclick` attribute should be `onClick`

<Button onclick={this.topFunction} id="myBtn" title="Go to top">

should be

<Button onClick={this.topFunction} id="myBtn" title="Go to top">

answered Nov 25, 2018 at 4:22

Dinesh Pandiyan

6,3193 gold badges36 silver badges50 bronze badges

Comments

Giselle Rosa · Accepted Answer · 2021-09-21 20:25:47Z

0

I was doing the same way you did, but i find this way and everything changed, don't forget use onClick in react with "C" with caps! In my opinion this is the best way...

const topFunction = () => {
    window.scrollTo(0, 0)
  }

 return (
   <div>
     <button onClick={topFunction}>Topo</button>
   </div>
)

answered Sep 21, 2021 at 20:25

Giselle Rosa

313 bronze badges

Collectives™ on Stack Overflow

Adding scroll to top button is not working with react?

3 Answers 3

2 Comments

1. Pass scroll handler the right way

2. Add `componentWillUnmount` lifecycle method

3. `onclick` attribute should be `onClick`

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1. Pass scroll handler the right way

2. Add componentWillUnmount lifecycle method

3. onclick attribute should be onClick

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

2. Add `componentWillUnmount` lifecycle method

3. `onclick` attribute should be `onClick`