scroll down react js typescript

1// ES6 Imports
2import * as Scroll from 'react-scroll';
3import { Link, Element, Events, animateScroll as scroll, scrollSpy, scroller } from 'react-scroll'
4
5// Or Access Link,Element,etc as follows
6let Link      = Scroll.Link;
7let Element   = Scroll.Element;
8let Events    = Scroll.Events;
9let scroll    = Scroll.animateScroll;
10let scrollSpy = Scroll.scrollSpy;
11
12// ES5
13var React  = require('react');
14var Scroll = require('react-scroll');
15
16var Link      = Scroll.Link;
17var Element   = Scroll.Element;
18var Events    = Scroll.Events;
19var scroll    = Scroll.animateScroll;
20var scrollSpy = Scroll.scrollSpy;
21
22var Section = React.createClass({
23  componentDidMount: function() {
24    Events.scrollEvent.register('begin', function(to, element) {
25      console.log('begin', arguments);
26    });
27
28    Events.scrollEvent.register('end', function(to, element) {
29      console.log('end', arguments);
30    });
31
32    scrollSpy.update();
33  },
34  componentWillUnmount: function() {
35    Events.scrollEvent.remove('begin');
36    Events.scrollEvent.remove('end');
37  },
38  scrollToTop: function() {
39    scroll.scrollToTop();
40  },
41  scrollToBottom: function() {
42    scroll.scrollToBottom();
43  },
44  scrollTo: function() {
45    scroll.scrollTo(100);
46  },
47  scrollMore: function() {
48    scroll.scrollMore(100);
49  },
50  handleSetActive: function(to) {
51    console.log(to);
52  },
53  render: function () {
54    return (
55      <div>
56        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} onSetActive={this.handleSetActive}>
57          Test 1
58        </Link>
59        <Link activeClass="active" to="test1" spy={true} smooth={true} offset={50} duration={500} delay={1000}>
60          Test 2 (delay)
61        </Link>
62        <Link className="test6" to="anchor" spy={true} smooth={true} duration={500}>
63          Test 6 (anchor)
64        </Link>
65        <Button activeClass="active" className="btn" type="submit" value="Test 2" to="test2" spy={true} smooth={true} offset={50} duration={500} >
66          Test 2
67        </Button>
68
69        <Element name="test1" className="element">
70          test 1
71        </Element>
72
73        <Element name="test2" className="element">
74          test 2
75        </Element>
76
77        <div id="anchor" className="element">
78          test 6 (anchor)
79        </div>
80
81        <Link to="firstInsideContainer" containerId="containerElement">
82          Go to first element inside container
83        </Link>
84
85        <Link to="secondInsideContainer" containerId="containerElement">
86          Go to second element inside container
87        </Link>
88        <div className="element" id="containerElement">
89          <Element name="firstInsideContainer">
90            first element inside container
91          </Element>
92
93          <Element name="secondInsideContainer">
94            second element inside container
95          </Element>
96        </div>
97
98        <a onClick={this.scrollToTop}>To the top!</a>
99        <br/>
100        <a onClick={this.scrollToBottom}>To the bottom!</a>
101        <br/>
102        <a onClick={this.scrollTo}>Scroll to 100px from the top</a>
103        <br/>
104        <a onClick={this.scrollMore}>Scroll 100px more from the current position!</a>
105      </div>
106    );
107  }
108});
109
110React.render(
111  <Section />,
112  document.getElementById('example')
113);