Initial commit

iamdustan · iamdustan · commit eeff7dec1882 · 2013-08-07T23:47:47.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components
+
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Dustan Kasten
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+smoothScrollTo.js
+=================
+
+Polyfill for window.scrollTo(x, y, 'smooth');
diff --git a/bower.json b/bower.json
@@ -0,0 +1,12 @@
+{
+  "name": "smoothScrollTo",
+  "version": "0.0.0",
+  "main": "smoothScrollTo.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}
diff --git a/smoothScrollTo.js b/smoothScrollTo.js
@@ -0,0 +1,52 @@
+(function () {
+  'use strict';
+
+  if ('scrollBehavior' in document.documentElement.style) return;
+
+  var originalScrollTo = window.scrollTo;
+
+  function now() {
+    return window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now !== undefined ? Date.now() : +new Date;
+  }
+
+  // ease-in-out
+  function ease(k) {
+    return 0.5 * (1 - Math.cos(Math.PI * k));
+  }
+
+  window.scrollTo = function(x, y, type) {
+    if (type !== 'smooth')
+      return originalScrollTo(x, y);
+
+    // TODO: make this intelligent. 300ms per scroll
+    var SCROLL_TIME = 300;
+    var frame;
+    var sx = this.pageXOffset;
+    var sy = this.pageYOffset;
+
+    var startTime = now();
+
+    // TODO: look into polyfilling scroll-behavior: smooth css property
+    // var ey = element.offsetTop, ex = element.offsetLeft;
+    var step = function() {
+      var time = now();
+      var elapsed = (time - startTime) / SCROLL_TIME;
+      elapsed = elapsed > 1 ? 1 : elapsed;
+
+      var value = ease(elapsed);
+      var _x = sx + ( x - sx ) * value;
+      var _y = sy + ( y - sy ) * value;
+
+      if (_x >= x) _x = x;
+      if (_y >= y) _y = y;
+      window.scrollTo(_x, _y)
+
+      if (_x === x && _y === y) return;
+      frame = requestAnimationFrame(step);
+    }
+
+    frame = requestAnimationFrame(step);
+  }
+
+}());
+
diff --git a/test.html b/test.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+  <h1>Quick and dirty scrollTo(x, y, 'smooth') testing</h1>
+  <p style='height: 500px'>For real. Really quick. Really dirty.</p>
+  <h2>A second after pageload, you should be smoothly scrolled to my neighborhood</h2>
+  <p style='height: 500px'>Welcome to the neighborhood.</p>
+
+  <script src="smoothScrollTo.js"></script>
+  <script>
+  document.addEventListener('DOMContentLoaded', function(e) {
+    setTimeout(function() {
+      window.scrollTo(0, 500, 'smooth');
+    }, 1000);
+  }, false);
+  </script>
+</body>
+</html>
+
