Reputation: 958
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
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
Reputation: 6299
You need to fix a couple of things in your code.
Change this
componentDidMount() {
window.addEventListener("scroll", this.handeleScroll());
}
to
componentDidMount() {
window.addEventListener("scroll", this.handeleScroll); // remove brackets ()
}
componentWillUnmount
lifecycle methodEvent listeners should be added in componentDidMount
and removed in componentWillUnmount
componentWillUnmount() {
window.removeEventListener("scroll", this.handeleScroll);
}
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
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