react-scroll-up - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

index.js

@@ -16,4 +16,5 @@ /**
         currentTime: 0, // store current time of animation
-        interval: null,  // store interval reference
-        intervalTime: 20 // how often calculate new position
+        startTime: null,
+        rafId: null,
+        lastPosition: null
     },
@@ -28,3 +29,3 @@
             'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic',
-            'easeInOutElastic', 'easeInBack','easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce',
+            'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce',
             'easeInOutBounce']),
@@ -35,3 +36,3 @@ duration: React.PropTypes.number, // seconds
 
-    getDefaultProps: function() {
+    getDefaultProps: function () {
         return {
@@ -52,3 +53,3 @@ duration: 250,
     },
-    getInitialState: function() {
+    getInitialState: function () {
         return {
@@ -58,6 +59,6 @@ show: false
     },
-    shouldComponentUpdate: function(nextProps, nextState) {
+    shouldComponentUpdate: function (nextProps, nextState) {
         return nextState.show !== this.state.show;
     },
-    componentDidMount: function() {
+    componentDidMount: function () {
         window.addEventListener('scroll', this.handleScroll);
@@ -67,3 +68,3 @@ window.addEventListener("wheel", this.stopScrolling, false);
 
-    componentWillUnmount: function() {
+    componentWillUnmount: function () {
         window.removeEventListener('scroll', this.handleScroll);
@@ -73,3 +74,3 @@ window.removeEventListener("wheel", this.stopScrolling, false);
 
-    handleScroll: function() {
+    handleScroll: function () {
         if (window.scrollY > this.props.showUnder) {
@@ -81,36 +82,39 @@ this.setState({show: true});
     },
-    handleClick: function() {
+    handleClick: function () {
         this.stopScrolling();
         this.data.startValue = window.scrollY;
+        this.data.lastPosition = window.scrollY;
         this.data.currentTime = 0;
+        this.data.startTime = null;
+        this.data.rafId = window.requestAnimationFrame(this.scrollStep);
+    },
 
-        var that = this;
-        this.data.interval = setInterval(function() {
+    scrollStep: function (timestamp) {
+        if (!this.data.startTime) {
+            this.data.startTime = timestamp;
+        }
 
-            /**
-             * TweenFunctions[that.props.easing] = function(t, b, _c, d) {...}
-             * t: current time, b: beginning value, _c: final value, d: total duration
-             *
-             */
-            var position = TweenFunctions[that.props.easing](
-                that.data.currentTime,
-                that.data.startValue,
-                that.props.topPosition,
-                that.props.duration
-            );
+        this.data.currentTime = timestamp - this.data.startTime;
 
-            if (position == that.props.topPosition ) {
-                that.stopScrolling();
-            }
-            that.data.currentTime = that.data.currentTime + that.data.intervalTime;
-            window.scrollTo(window.scrollY,position);
+        var position = TweenFunctions[this.props.easing](
+            this.data.currentTime,
+            this.data.startValue,
+            this.props.topPosition,
+            this.props.duration
+        );
 
-        }, this.data.intervalTime);
+        if (position > this.data.lastPosition) {
+            this.stopScrolling();
+        } else {
+            this.data.lastPosition = position;
+            window.scrollTo(window.scrollY, position);
+            this.data.rafId = window.requestAnimationFrame(this.scrollStep);
+        }
     },
 
-    stopScrolling: function() {
-        clearInterval(this.data.interval);
+    stopScrolling: function () {
+        window.cancelAnimationFrame(this.data.rafId);
     },
 
-    render: function() {
+    render: function () {
         var style = this.props.style;
@@ -120,3 +124,2 @@ style.opacity = this.state.show ? 1 : 0;
 
-
         return (
@@ -123,0 +126,0 @@ React.createElement("div", {style: style, onClick: this.handleClick},

package.json

 {
   "name": "react-scroll-up",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React component to render element for scroll to top of page",
@@ -5,0 +5,0 @@ "author": "Milos Janda <[e-mail]>",

README.md

 # react-scroll-up
-React component to add custom button (it can be something what you want) for scroll to top of page
+React component to add custom button (it can be something what you want) for scroll to top of page.
 
+Library uses [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame),
+if you want better browser compatibility, you can use something like  [https://gist.github.com/paulirish/1579671].
 
+
 ## Install
@@ -6,0 +9,0 @@

No alert changes

Improved metrics

Lines of code

108

increased by3.85%

Number of lines in readme file

72

increased by4.35%

Worsened metrics

Total package byte prevSize

7607

decreased by-68.46%

Number of package files

6

decreased by-50%

No dependency changes