integrate smooth scrolling more react style

xMartin · Nov 29, 2017 · 349e1d3 · 349e1d3
1 parent 82aa925
commit 349e1d3
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/js/app/components/main.js b/js/app/components/main.js
@@ -41,7 +41,7 @@ function (React, createReactClass, PureRenderMixin, PropTypes, SmoothScroll, Loa
       window.addEventListener('scroll', this.checkTransactionsHeadingVisibility);
       window.addEventListener('resize', this.checkTransactionsHeadingVisibility);
       this.checkTransactionsHeadingVisibility();
-      new SmoothScroll('#transactions-heading-link');
+      this.scroller = new SmoothScroll();
     },
 
     componentWillUnmount: function () {
@@ -70,6 +70,10 @@ function (React, createReactClass, PureRenderMixin, PropTypes, SmoothScroll, Loa
       }
     },
 
+    onTransitionsTeaserClick: function () {
+      this.scroller.animateScroll(this.refs.transactionsHeading);
+    },
+
     render: function () {
       return (
         el('div', {className: 'scene mainScene' + (this.props.visible ? '' : ' hidden')},
@@ -117,12 +121,15 @@ function (React, createReactClass, PureRenderMixin, PropTypes, SmoothScroll, Loa
               this.props.transactions.length
               ?
               el('div', {className: 'row'},
-                el('h3', {ref: 'transactionsHeading', className: 'transactions-heading', id: 'transactions-heading'}, 'Transactions'),
+                el('h3', {ref: 'transactionsHeading', className: 'transactions-heading'}, 'Transactions'),
                 (
                   this.state.transactionsHeadingIsOutOfViewport
                   ?
-                  el('h3', {className: 'transactions-heading transactions-heading-fixed'},
-                    el('a', {href: '#transactions-heading', id: 'transactions-heading-link'}, '▼ Transactions')
+                  el('h3', {
+                    className: 'transactions-heading transactions-heading-fixed',
+                    onClick: this.onTransitionsTeaserClick
+                  },
+                    '▼ Transactions'
                   )
                   :
                   null