CODEWITHSUNDEEP
reactjs
dwp
dwp

Reputation: 958

Adding scroll to top button is not working with react?

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!

Upvotes: 1

Views: 5490

Answers (3)

Giselle Rosa
Giselle Rosa

Reputation: 31

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>
)

Upvotes: 0

Dinesh Pandiyan
Dinesh Pandiyan

Reputation: 6299

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">

Upvotes: 1

Kevin Bai
Kevin Bai

Reputation: 631

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"}).

Upvotes: 3

Related Questions