# scroll-to-element

> Smooth scrolling to an element via selector or node reference

Latest version **2.0.3** (published 2019-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install scroll-to-element
pnpm add scroll-to-element
yarn add scroll-to-element
bun add scroll-to-element
```

## Health

**Score 18/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2019-03-11 |
| First published | 2015-03-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/scroll-to-element) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 108 |
| Author | Will Hoag |
| Maintainers | willhoag |
| Keywords | animate, scroll, tween, smooth |

## Links

- npm: https://www.npmjs.com/package/scroll-to-element
- Repository: https://github.com/willhoag/scroll-to-element
- Homepage: https://github.com/willhoag/scroll-to-element#readme
- Issues: https://github.com/willhoag/scroll-to-element/issues
- npm.io page: https://npm.io/package/scroll-to-element

## Dependencies (1)

- [raf](https://npm.io/package/raf.md) ^3.4.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 2.0.3 (latest) — 2019-03-11
- 2.0.2 — 2018-08-25
- 2.0.1 — 2018-08-24
- 2.0.0 — 2016-02-04
- 1.1.0 — 2015-10-23
- 1.0.0 — 2015-08-14
- 0.0.2 — 2015-03-22
- 0.0.1 — 2015-03-15

## 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, <options>)`
##### 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`

## EXAMPLE

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

scrollToElement('#id');

// with options
scrollToElement('.className', {
	offset: 0,
	ease: 'out-bounce',
	duration: 1500
});

// 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

---
_Source: https://npm.io/package/scroll-to-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._