https://github.com/willhoag/scroll-to-element

Smooth scrolling to an element via selector or node reference
https://github.com/willhoag/scroll-to-element

Last synced: 2 months ago
JSON representation

Smooth scrolling to an element via selector or node reference

• Host: GitHub
• URL: https://github.com/willhoag/scroll-to-element
• Owner: willhoag
• License: mit
• Created: 2015-03-15T23:17:29.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-04-16T11:58:53.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T02:47:40.377Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 96.7 KB
• Stars: 106
• Watchers: 5
• Forks: 13
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-github-star - scroll-to-element

README

        
# scroll-to-element

Smooth scrolls to element of the specified selector or element reference with optional offset, scroll-positon, easing, and duration. Takes into account document height for elements low on the page.

[![NPM](https://nodei.co/npm/scroll-to-element.png)](https://nodei.co/npm/scroll-to-element/)

## `scrollToElement(selector, )`

##### Valid options:

###### offset : *number*

> Add an additional offset to the final position. if

> \> 0 then page is moved to the bottom otherwise the page is moved to the top.

###### align : *string*

> Alignment of the element in the resulting viewport. Can be

> one of `'top'`, `'middle'` or `'bottom'`. Defaulting to `'top'`.

###### ease : *string*

> Easing function defaulting to "out-circ" (view [ease](https://github.com/component/ease) for more)

###### duration : *number*

> Animation duration defaulting to `1000`

##### Callback support

> scrollToElement emits an `end` event when the scroll animation is complete, and can be optionally consumed to perform a callback.

## EXAMPLE

```js

var scrollToElement = require('scroll-to-element');

scrollToElement('#id');

// with options

scrollToElement('.className', {

	offset: 0,

	ease: 'out-bounce',

	duration: 1500

}).on('end', () => {

	console.log('Done scrolling!');

});

// or if you already have a reference to the element

var elem = document.querySelector('.className');

scrollToElement(elem, {

	offset: 0,

	ease: 'out-bounce',

	duration: 1500

});

```

## LICENSE

MIT