javascript - 如何使用 react js 添加平滑滚动返回顶部按钮？

Question

我已经使用 jquery 实现了这个，但想在 React 中创建一个组件来做同样的事情

<script>            
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.move-top').fadeIn(duration);
        } else {
            jQuery('.move-top').fadeOut(duration);
        }
    });

    jQuery('.move-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

在我的页脚

<a href="#" class="move-top">↑</a>

Answer 1

首先，我们需要跟踪页面在组件状态下的滚动情况。这种跟踪应该只在组件安装时发生。这可以像这样完成:

getInitialState: function() {
  return { scrollTop: 0 };
},
componentWillMount: function() {
  window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function() {
  window.removeEventListener('scroll', this.handleScroll);
},
handleScroll: function() {
   this.setState({scrollTop: $(window).scrollTop()});
},

注意:这里依然是使用jQuery获取当前滚动位置。参见 this question不用 jQuery 就可以做到这一点。

然后我们需要渲染组件:

scrollToTop: function() {
  $(window).animate({scrollTop: 0}, this.props.duration);
},
render: function() {
  if (this.state.scrollTop < this.props.offset) {
    return null;
  }

  return <a href="#" className="move-top" onClick={this.scrollToTop}>↑</a>
}

这仍然使用 jQuery 来进行实际的滚动。看看this question无需 jQuery 即可滚动。

如果你想让这个组件淡入淡出，你应该把它包裹在一个 ReactCSSTransitionGroup 中并使用 CSS 动画。这记录在 React docs 上.

这是一个 JSFiddle演示。