Question

我想添加按钮，方法是单击该页面上的动画将滚动回到顶部。我知道如何使用JQuery来实现。我尝试了这段代码：

import React, { Component } from 'react';

import $ from 'jquery';

import goUpNarrrowImage from '../static/img/goUpNarrow.png';

class GoTopButton extends Component {
  constructor() {
    super();

    this.onclick = this.onclick.bind(this);
  }

  render() {

    return ( 
      <button>
        <img src={goUpNarrrowImage} style={{
          display: "inline-block",
          marginRight: "10px"
        }} />
        наверх
      </button>
    );
  }

  onclick() {
    $("html, body").animate({ scrollTop: 0 }, 1000);
  }
}

export default GoTopButton;

但是当我单击按钮时，什么也没发生。

Answer 1

按钮中缺少

onclick。因此，将onclick传递到按钮

<button onclick={this.onclick}>

Answer 2

您可以使用https://www.npmjs.com/package/react-scroll-up之类的react组件轻松做到这一点

<ScrollToTop showUnder={0} duration={1000} >
    <button>
        <img src={goUpNarrrowImage} style={{
          display: "inline-block",
          marginRight: "10px"
        }} />
    </button>
</ScrollToTop>

使用React中的动画使滚动到顶部按钮

2 个答案: