https://github.com/kdcro101/scroll-to

A vanilla JS smooth scroll script
https://github.com/kdcro101/scroll-to

Last synced: 17 days ago
JSON representation

A vanilla JS smooth scroll script

• Host: GitHub
• URL: https://github.com/kdcro101/scroll-to
• Owner: kdcro101
• License: mit
• Created: 2018-03-08T22:48:19.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2016-10-02T17:09:47.000Z (about 8 years ago)
• Last Synced: 2024-10-23T05:16:30.287Z (2 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# scrollTo.js

A vanilla JS smooth scrolling animation plugin, no jQuery required.

---

## Installation

Clone the repo and require or import `scrollTo.js`:

```js

var scrollTo = require('path/to/scrollTo');

// or

import scrollTo from ('path/to/scrollTo');

```

## Basic Usage

`scrollTo` accepts two parameters:

  * `target` The scroll target. Can be either an element or a numeric position on the page.

  * `options` An optional configuration object.

```js

scrollTo(target, [options]);

```

## Options

* Duration

  *	The duration of the scroll animation in milliseconds

  * Default: `500`

* Easing

  * The easing function of the animation

  * Options:

    * One of the following strings, equivalent to the CSS animation easing functions of the same name:

    	* `'easeInOut'` (default)

    	* `'ease'`

    	* `'easeOut'`

    * Alternately, you can pass the four points of a custom bezier curve via an array:

    	* `[0.47, 0, 0.745, 0.715]`

* Offset

  * Offset from the top of the viewport to the scroll target (only valid when target is an element)

  * Default: `0`

* Callback

  * Callback function invoked on animation end

  * Default: `null`

* Context

  * The container element to be animated

  * Default: `window`

___

### `scrollTo.autobindAnchorLinks`

A convenience method that finds all of the anchor tags that link to an element within the same page and binds a click handler that smooth scrolls to that location.

Accepts an optional configuration object with all of the same options as the primary API, with an additional `onStartScroll` callback that is invoked when the scroll animation begins.

The function is passed two parameters:

  * `anchorLink`

  * `scrollTarget`

```js

scrollTo.autobindAnchorLinks({

	easing: 'ease',

	onStartScroll: (anchorLink, scrollTarget) => {

		//...

	}

});

```