Merge pull request #1 from janrembold/dev

Initial commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn-error.log

README.md

@@ -1,2 +1,61 @@
 # scroll-to
 Vanilla JavaScript micro function for animated scrolling written in ES6
+
+## Installation
+
+```
+yarn add es6-scroll-to
+
+// or
+
+npm install es6-scroll-to
+```
+
+## Usage
+
+```javascript
+import {animatedScrollTo} from 'es6-scroll-to';
+
+// shorthand - setting target Y-Offset directly
+animatedScrollTo(600);
+
+// ...equals to 
+animatedScrollTo({
+    to: 600
+});
+
+// change animation duration [in ms]
+animatedScrollTo({
+    duration: 1000,
+    to: 600
+});
+
+// change easing functions, see https://github.com/janrembold/es6-easings
+import {easeInQuint} from 'es6-easings';
+animatedScrollTo({
+    easing: easeInQuint,
+    to: 600
+});
+
+```
+
+## Options
+
+The `animatedScrollTo` method takes a single parameter that might be an `Object` or the target Y-Offset as positive `Integer`.
+
+```
+{
+    to: [Number], // required
+    duration: [Integer], // optional, defaults to 400
+    easing: [function] // optional, defaults to 'easeOutQuad'    
+}
+```
+
+### `to` (required)
+The target Y-Offset as positive `Integer`
+
+### `duration` (optional)
+The animation duration in milliseconds. Defaults to `400`
+
+### `easing` (optional)
+The easing function that is used to calculate the animation. See https://github.com/janrembold/es6-easings for easing variations. Defaults to `easeOutQuad`

example/bundle.js

@@ -0,0 +1,97 @@
+(function () {
+    'use strict';
+
+    const defaults = {
+        duration: 400,
+        easing: (t, b, c, d) => {
+            return -c *(t/=d)*(t-2) + b;
+        },
+        to: 0
+    };
+
+    const animatedScrollTo = (args) => {
+        if(isInteger(args)) {
+            args = {
+                to: args
+            };
+        }
+
+        const options = extend(defaults, args);
+
+        options.startingYOffset = window.pageYOffset;
+        options.distanceYOffset = parseInt(options.to, 10) - options.startingYOffset;
+
+        window.requestAnimationFrame(timestamp => animateScroll(options, timestamp));
+    };
+
+    const animateScroll = (options, now) => {
+        if(!options.startTime) {
+            options.startTime = now;
+        }
+
+        const currentTime = now - options.startTime;
+        let newYOffset = Math.round(options.easing(
+            currentTime, 
+            options.startingYOffset, 
+            options.distanceYOffset,
+            options.duration
+        ));
+
+        if(currentTime < options.duration) {
+            window.requestAnimationFrame(timestamp => animateScroll(options, timestamp)); 
+        } else {
+            newYOffset = options.to;
+        }
+
+        setScrollTopPosition(newYOffset);
+    };
+
+    const setScrollTopPosition = (newYOffset) => {
+        document.documentElement.scrollTop = newYOffset;
+        document.body.scrollTop = newYOffset;
+    };
+
+    const isInteger = (value) => {
+        if(Number.isInteger) {
+            return Number.isInteger(value);
+        } else {
+            return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+        }
+    };
+
+    const extend = (defaults, options) => {
+        const extendedOptions = {};
+        for (let key in defaults) { 
+            extendedOptions[key] = options[key] || defaults[key]; 
+        }
+        return extendedOptions;
+    };
+
+    const easeInQuint = (t, b, c, d) => {
+        return c*(t/=d)*t*t*t*t + b;
+    };
+
+    const easeInOutBack = (t, b, c, d) => {
+        var s = 1.70158; 
+        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+    };
+
+    document.getElementById('scroll-600').onclick = function() {
+        animatedScrollTo(600);
+    };
+
+    document.getElementById('scroll-1200').onclick = function() {
+        animatedScrollTo({
+            to: 1200,
+            easing: easeInOutBack
+        });
+    };
+
+    document.getElementById('scroll-top').onclick = function() {
+        animatedScrollTo({
+            easing: easeInQuint
+        });
+    };
+
+}());

example/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+        }
+        div {
+            text-align: center;
+            padding: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div style="height:560px;background-color:lightblue">
+        <button id="scroll-600">Scroll to 600px</button>
+    </div>
+    <div style="height:560px;background-color:lightcoral">
+        <button id="scroll-1200">Scroll to 1200px</button>
+    </div>
+    <div style="height:560px">
+        <button id="scroll-top">Scroll top</button>
+    </div>
+
+    <script src="bundle.js"></script>
+</body>
+</html>

example/index.js

@@ -0,0 +1,19 @@
+import {animatedScrollTo} from '../index';
+import {easeInOutBack,easeInQuint} from 'es6-easings';
+
+document.getElementById('scroll-600').onclick = function() {
+    animatedScrollTo(600);
+};
+
+document.getElementById('scroll-1200').onclick = function() {
+    animatedScrollTo({
+        to: 1200,
+        easing: easeInOutBack
+    });
+};
+
+document.getElementById('scroll-top').onclick = function() {
+    animatedScrollTo({
+        easing: easeInQuint
+    });
+};

index.js

@@ -0,0 +1,65 @@
+const defaults = {
+    duration: 400,
+    easing: (t, b, c, d) => {
+        return -c *(t/=d)*(t-2) + b;
+    },
+    to: 0
+};
+
+export const animatedScrollTo = (args) => {
+    if(isInteger(args)) {
+        args = {
+            to: args
+        };
+    }
+
+    const options = extend(defaults, args);
+
+    options.startingYOffset = window.pageYOffset;
+    options.distanceYOffset = parseInt(options.to, 10) - options.startingYOffset;
+
+    window.requestAnimationFrame(timestamp => animateScroll(options, timestamp));
+};
+
+const animateScroll = (options, now) => {
+    if(!options.startTime) {
+        options.startTime = now;
+    }
+
+    const currentTime = now - options.startTime;
+    let newYOffset = Math.round(options.easing(
+        currentTime, 
+        options.startingYOffset, 
+        options.distanceYOffset,
+        options.duration
+    ));
+
+    if(currentTime < options.duration) {
+        window.requestAnimationFrame(timestamp => animateScroll(options, timestamp)); 
+    } else {
+        newYOffset = options.to;
+    }
+
+    setScrollTopPosition(newYOffset);
+}
+
+const setScrollTopPosition = (newYOffset) => {
+    document.documentElement.scrollTop = newYOffset;
+    document.body.scrollTop = newYOffset;
+};
+
+const isInteger = (value) => {
+    if(Number.isInteger) {
+        return Number.isInteger(value);
+    } else {
+        return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+    }
+};
+
+const extend = (defaults, options) => {
+    const extendedOptions = {};
+    for (let key in defaults) { 
+        extendedOptions[key] = options[key] || defaults[key]; 
+    }
+    return extendedOptions;
+};

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "es6-scroll-to",
+  "version": "1.0.0",
+  "description": "Vanilla JavaScript micro function for animated scrolling written in ES6",
+  "main": "index.js",
+  "repository": "https://github.com/janrembold/es6-scroll-to.git",
+  "author": "janrembold <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "start": "rollup -c --watch"
+  },
+  "devDependencies": {
+    "es6-easings": "^1.0.0",
+    "rollup": "^0.61.2",
+    "rollup-plugin-node-resolve": "^3.3.0"
+  }
+}

rollup.config.js

@@ -0,0 +1,11 @@
+import resolve from 'rollup-plugin-node-resolve';
+export default {
+  input: 'example/index.js',
+  output: {
+    file: 'example/bundle.js',  
+    format: 'iife'
+  },
+  plugins: [
+    resolve({ jsnext: true })
+  ]
+};

yarn.lock

@@ -0,0 +1,48 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/[email protected]":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+
+"@types/node@*":
+  version "10.3.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.3.5.tgz#8423cdf6e6fb83433e489900d7600d3b61c8260c"
+
+builtin-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
+
+es6-easings@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es6-easings/-/es6-easings-1.0.0.tgz#ca87394c16ae38a55cfb6ad158257d9c649fda54"
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
+resolve@^1.1.6:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  dependencies:
+    path-parse "^1.0.5"
+
+rollup-plugin-node-resolve@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.3.0.tgz#c26d110a36812cbefa7ce117cadcd3439aa1c713"
+  dependencies:
+    builtin-modules "^2.0.0"
+    is-module "^1.0.0"
+    resolve "^1.1.6"
+
+rollup@^0.61.2:
+  version "0.61.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.61.2.tgz#30a953736964683a5b8ea952b137a393d84e6302"
+  dependencies:
+    "@types/estree" "0.0.39"
+    "@types/node" "*"