我尝试在React上实现jquery按钮点击滚动到顶部。我也想实现按钮，它出现在400px之后。我尝试了逻辑，但似乎按钮点击不起作用。
这是我的React组件

import React from "react";
import { createLogEntry } from "./Api";
import Show from "./Show";
export default function Form() {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [state, setState] = React.useState({
    name: " ",
    description: " "
  });
  const changeHandler = e => {
    setState({ ...state, [e.target.id]: e.target.value });
  };
  const handleSubmit = async e => {
    e.preventDefault();
    setLoading(true);
    try {
      await createLogEntry({
        name: state.name,
        description: state.description
      });
    } catch (error) {
      setError(error.message);
    }
    setLoading(false);
    setState({ name: " ", description: " " });
  };
  return (
    <React.Fragment>
      <div className="app">
        <button className="btnScrollToTop"> //THIS IS MY SCROLL BUTTON
          <i className="material-icons">arrow_upward</i>
        </button>
        <div className="row">
          <form className="col s12" onSubmit={handleSubmit}>
            {error ? <p className="error">{error}</p> : null}
            <div className="row">
              <div className="input-field col s3">
                <input
                  id="name"
                  type="text"
                  data-length="4"
                  onChange={changeHandler}
                  required
                  value={state.name}
                />
                <label htmlFor="input_text">Topic</label>
              </div>
            </div>
            <div className="row">
              <div className="input-field col s8">
                <textarea
                  id="description"
                  className="materialize-textarea"
                  data-length="120"
                  onChange={changeHandler}
                  required
                  value={state.description}
                ></textarea>
                <label htmlFor="textarea2">Description</label>
              </div>
            </div>
            <button
              className="btn waves-effect blue lighten-1"
              type="submit"
              name="action"
              disabled={loading}
            >
              {loading ? "Loading..." : "Create Entry"}
            </button>
          </form>
        </div>
      </div>
      <Show />
    </React.Fragment>
  );
}

字符串

这是CSS。CSS样式工作正常，如预期。

.btnScrollToTop {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e62739;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border: none;
  outline: none;
  cursor: pointer;
}
.btnScrollToTop:active {
  background: #cc2333;
}

型

这是React的index.html文件，我想问题出在这里。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      const btnScrollToTop = document.getElementsByClassName(".btnScrollToTop"); //HERE I called the button className from the component and below DOM manipulation.
      btnScrollToTop.addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      });
    </script>
  </body>
</html>

型

3条答案

按热度按时间

w8rqjzmb1#

而不是使用getElementsByClassName只是添加侦听器的所有类，也把它放在document.ready函数。

$(document).ready(function() {
    $(".btnScrollToTop").addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      });
});

赞(0）回复(0）举报 2024-01-07

f3temu5u2#

既然你在使用materialize，为什么不使用内置的scrollspy呢？
要滚动到的元素：

<div id="header" class="scrollspy">
   ...
</div>

字符串
在目标div上，我们分配一个ID作为目标，并分配一个scrollspy类来获得平滑的动画。
滚动触发器：

<a href="#header">Scroll to trigger!</a>

型
初始化：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.scrollspy');
    var instances = M.ScrollSpy.init(elems);
  });

型
https://materializecss.com/scrollspy.html的

展开查看全部

a8jjtwal3#

@estinamir的其他答案，

我不知道为什么ReactscrollIntoView，scrollTop动画不工作。即使使用useref。（我使用laravel 10与惯性）
我的解决方案如下：
首先安装npm install jquery，然后导入
import $ from "jquery";个
代码如下

const handleScrolltop = () => {
    $('html, body').animate({
        scrollTop: 0
    }, 1500);
};

字符串
如何工作：

<button onClick={handleScrolltop}>Scroll to Top</button>

jquery React滚动到顶部动画按钮不起作用

3条答案

相关问题

热门标签

最新问答