React Scrolling

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="scrolling">
    Make the page big enough to scroll
</div>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

#scrolling {
  height: 1000px;
}

JavaScript 1.7

var ScrollLink = React.createClass({
  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()});
  },
  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>
  }
});

ReactDOM.render(
  <ScrollLink duration={400} offset={220}/>,
  document.getElementById('container'));