添加滚动到顶部按钮无法使用react

Question

问题：

我对反应很陌生。我正在创建一个web应用程序。在那里，我实现了一种滚动到顶部的方式，就像这样。

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;

但它并没有如预期的那样发挥作用。我在堆栈溢出中尝试了很多例子，以及我在谷歌搜索中找到的例子。但这些并不能完全满足我的要求。有人能帮助我通过修改我的代码来解决这个问题并使其可行吗？非常感谢！

Answer 1

您可以使用window.pageYOffset来获取页面的当前滚动位置，而不是document.body.scroll。

要滚动到顶部，请使用：window.scrollTo(0,0)。

如果要以平滑的行为滚动，可以使用：window.scrollTo({top: 0, behavior: "smooth"})。

Answer 2

您需要修复代码中的一些问题。

1.以正确的方式传递滚动处理程序

更改此

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

至

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

2.增加componentWillUnmount生命周期方法

应在componentDidMount中添加事件侦听器，并在componentWillUnmount中删除

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

3.onclick属性应为onClick

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

应该是

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

Answer 3

我和你做的一样，但我发现了这种方式，一切都变了，别忘了在react with"中使用onClick；C"；带帽子！在我看来，这是最好的方式。。。

const topFunction = () => {
window.scrollTo(0, 0)
}
return (
<div>
<button onClick={topFunction}>Topo</button>
</div>
)