将滚动条添加到顶部按钮不起作用吗？

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;

但是它没有按预期工作。我在堆栈溢出中尝试了很多示例，以及通过Google搜索找到的示例。但是那些不能完全满足我的要求。有人可以通过修改代码并使之可行来帮助我解决此问题吗？非常感谢你！

Answer 1

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

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

更改此

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

到

componentWillUnmount

2。添加componentDidMount生命周期方法

应在componentWillUnmount中添加事件监听器，并在componentWillUnmount() { window.removeEventListener("scroll", this.handeleScroll); } 中将删除

onclick

3。 onClick属性应为<Button onclick={this.topFunction} id="myBtn" title="Go to top">

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

应该是

spring.datasource.url=jdbc:postgresql://localhost:5432/zeus
spring.datasource.username=postgres
spring.datasource.password=postgres
# JPA Hibernate properties
spring.jpa.database-platform=org.hibernate.dialect.PostgreSQL9Dialect
spring.jpa.show-sql=false
spring.jpa.hibernate.ddl-auto=create-drop
spring.jpa.hibernate.naming.implicit-strategy=org.hibernate.boot.model.naming.ImplicitNamingStrategyJpaCompliantImpl
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true
spring.datasource.initialization-mode=always

Answer 2

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

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

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