时间戳

首页 > 解决方案 > 添加滚动到顶部按钮不适用于反应？

reactjs - 添加滚动到顶部按钮不适用于反应？

问题描述

问题：

我对反应的东西很陌生。我正在创建一个 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 搜索找到的示例。但这些都不能完全满足我的要求。有人可以通过修改我的代码并使其可行来帮助我解决这个问题吗？非常感谢！

标签： reactjs

解决方案

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

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

如果您想以流畅的行为滚动，您可以使用：window.scrollTo({top: 0, behavior: "smooth"}).

推荐阅读