https://github.com/degjs/scrollto

Animated scrolling to an element or position
https://github.com/degjs/scrollto

animation-css

Last synced: about 1 month ago
JSON representation

Animated scrolling to an element or position

• Host: GitHub
• URL: https://github.com/degjs/scrollto
• Owner: DEGJS
• Created: 2016-08-17T21:26:21.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2023-01-04T14:54:05.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T22:12:27.245Z (9 months ago)
• Topics: animation-css
• Language: JavaScript
• Homepage: http://degjs.com/scrollTo
• Size: 1.28 MB
• Stars: 5
• Watchers: 11
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# scrollTo

![Run Tests](https://github.com/DEGJS/scrollTo/workflows/Run%20Tests/badge.svg)

ScrollTo is a module that will scroll to a specified element or position on a page with animated movement. It takes advantage of the native [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) method to ensure smooth animation.

**Please note** that several native scrolling methods exist with animation capabilities, including [Element.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo), [Window.scrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo), and [Element.scrollIntoView()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). If these native methods meet your needs, we recommend using them in favor of this module.

## Demo

You can view a demo of scrollTo [here](http://degjs.github.io/scrollTo/).

## Install

ScrollTo is an ES6 module. Consequently, you'll need an ES6 transpiler ([Babel](https://babeljs.io) is a nice one) as part of your Javascript workflow.

If you're already using NPM for your project, you can install scrollTo with the following command:

```

$ npm install @degjs/scroll-to

```

## Usage

```js

import scrollTo from "@degjs/scroll-to";

/* Scroll to an element with a 1-second, eased-in animation */

let destinationElement = document.querySelector('.some-element');

scrollTo({

    element: destinationElement,

    duration: 1000,

    easing: 'easeIn'

});

```

## Parameters

### options

Type: `Object`

#### options.element

Type: `Element`   

The element to scroll to. This option or the `position` option is required.

#### options.position

Type: `Number`   

The vertical position (in pixels) on the page to scroll to. This option or the `element` option is required.

#### options.duration

Type: `Number` Default: `500`   

The duration (in milliseconds) of the scroll animation. This option is optional.

#### options.easing

Type: `String` Default: `easeOut`   

The easing function for the animation. This option is optional. Valid values are:

+ linear

+ easeIn

+ easeOut

+ easeInOut

## Browser Support

ScrollTo depends on the following browser APIs:

+ [window.requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) (Note: scrollTo will still technically function if window.requestAnimationFrame is not supported, but the scrolling movement will be instantaneous with no animation)

+ [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

To support legacy browsers, you'll need to include polyfills for the above APIs.