├── .gitignore
├── Makefile
├── History.md
├── component.json
├── package.json
├── Readme.md
├── example.html
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | components
2 | build
3 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 |
2 | build: components index.js
3 | @component build --dev
4 |
5 | components: component.json
6 | @component install --dev
7 |
8 | clean:
9 | rm -fr build components template.js
10 |
11 | .PHONY: clean
12 |
--------------------------------------------------------------------------------
/History.md:
--------------------------------------------------------------------------------
1 |
2 | 0.0.2 / 2015-03-19
3 | ==================
4 |
5 | * docs
6 | * package: add "repository" field (#2)
7 | * package: remove "repo" field
8 | * package: update depdencies, fix "browserify" build
9 | * add browserify mappings (#6)
10 | * return tween instance (#4)
11 |
--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "scroll-to",
3 | "repo": "component/scroll-to",
4 | "description": "Smooth window scroll to position with requestAnimationFrame",
5 | "version": "0.0.2",
6 | "keywords": [
7 | "scroll",
8 | "animate",
9 | "scroll-to"
10 | ],
11 | "dependencies": {
12 | "component/raf": "1.2.0",
13 | "component/tween": "1.2.0"
14 | },
15 | "development": {
16 | "component/event": "*"
17 | },
18 | "license": "MIT",
19 | "main": "index.js",
20 | "scripts": [
21 | "index.js"
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "scroll-to",
3 | "description": "Smooth window scroll to position with requestAnimationFrame",
4 | "version": "0.0.2",
5 | "keywords": [
6 | "scroll",
7 | "animate",
8 | "scroll-to"
9 | ],
10 | "dependencies": {
11 | "component-raf": "1.2.0",
12 | "component-tween": "1.2.0"
13 | },
14 | "browser": {
15 | "raf": "component-raf",
16 | "tween": "component-tween"
17 | },
18 | "license": "MIT",
19 | "main": "index.js",
20 | "component": {
21 | "scripts": {
22 | "scroll-to/index.js": "index.js"
23 | }
24 | },
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/component/scroll-to.git"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 |
2 | # scroll-to
3 |
4 | Smooth window scroll to position with requestAnimationFrame and [Tween](https://github.com/component/tween).
5 |
6 | ## Installation
7 |
8 | $ component install component/scroll-to
9 |
10 | ## API
11 |
12 | ### scrollTo(x, y, [options])
13 |
14 | Scroll to the given point `(x, y)` with the given `options`:
15 |
16 | - `ease` easing function defaulting to "out-circ" (view [ease](https://github.com/component/ease) for more)
17 | - `duration` animation duration defaulting to `1000`
18 |
19 | ```js
20 | var scrollTo = require('scroll-to');
21 |
22 | scrollTo(500, 1200, {
23 | ease: 'out-bounce',
24 | duration: 1500
25 | });
26 | ```
27 |
28 | ## License
29 |
30 | MIT
31 |
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | scroll-to - smooth javascript window scrolling with requestAnimationFrame
4 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Module dependencies.
3 | */
4 |
5 | var Tween = require('tween');
6 | var raf = require('raf');
7 |
8 | /**
9 | * Expose `scrollTo`.
10 | */
11 |
12 | module.exports = scrollTo;
13 |
14 | /**
15 | * Scroll to `(x, y)`.
16 | *
17 | * @param {Number} x
18 | * @param {Number} y
19 | * @api public
20 | */
21 |
22 | function scrollTo(x, y, options) {
23 | options = options || {};
24 |
25 | // start position
26 | var start = scroll();
27 |
28 | // setup tween
29 | var tween = Tween(start)
30 | .ease(options.ease || 'out-circ')
31 | .to({ top: y, left: x })
32 | .duration(options.duration || 1000);
33 |
34 | // scroll
35 | tween.update(function(o){
36 | window.scrollTo(o.left | 0, o.top | 0);
37 | });
38 |
39 | // handle end
40 | tween.on('end', function(){
41 | animate = function(){};
42 | });
43 |
44 | // animate
45 | function animate() {
46 | raf(animate);
47 | tween.update();
48 | }
49 |
50 | animate();
51 |
52 | return tween;
53 | }
54 |
55 | /**
56 | * Return scroll position.
57 | *
58 | * @return {Object}
59 | * @api private
60 | */
61 |
62 | function scroll() {
63 | var y = window.pageYOffset || document.documentElement.scrollTop;
64 | var x = window.pageXOffset || document.documentElement.scrollLeft;
65 | return { top: y, left: x };
66 | }
67 |
--------------------------------------------------------------------------------