# smooth-scroll-by

> smooth-scroll-by - a library for smooth scrolling of the page to the anchor

Latest version **1.2.0** (published 2022-05-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install smooth-scroll-by
pnpm add smooth-scroll-by
yarn add smooth-scroll-by
bun add smooth-scroll-by
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-05-14 |
| First published | 2022-02-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eugene Morozov |
| Maintainers | emorozov28 |
| Keywords | smooth scroll, vanilla scroll, scroll anchor, scroll, anchor |

## Links

- npm: https://www.npmjs.com/package/smooth-scroll-by
- Repository: https://github.com/emorozov28/smooth-scroll
- Homepage: https://github.com/emorozov28/smooth-scroll#readme
- Issues: https://github.com/emorozov28/smooth-scroll/issues
- npm.io page: https://npm.io/package/smooth-scroll-by

## Recent versions

- 1.2.0 (latest) — 2022-05-14
- 1.1.0 — 2022-02-17
- 1.0.2 — 2022-02-14
- 1.0.1 — 2022-02-14

## README

# Vanilla JS Scrolling

[![npm version](https://badge.fury.io/js/smooth-scroll-by.svg)](https://www.npmjs.com/package/smooth-scroll-by)
[![](https://data.jsdelivr.com/v1/package/npm/smooth-scroll-by/badge)](https://www.jsdelivr.com/package/npm/smooth-scroll-by)

 [Demo](https://emorozov.top/app/smooth-scroll/ )
## Browsers support
Better support in modern browsers
 | IE | Edge | Chrome | Safari | Opera | Firefox | UC Browser |
| --- | --- | --- | --- | --- | --- | --- |
| - | + | + | + | + | + | + |


## Working with the library
```html
# link
<a href="#section1">block 1</a>
# or
<button data-scroll-href="#section2">block 2</button>
# or
<button data-scroll-href="#section3" class="link">block 3</button>
# You can use both options

# Blocks should have id
<section id="section1">1</section>
<section id="section2">2</section>
<section id="section3">2</section>
```

To get started, download the `npm i smooth-scroll-by` library and import it into your project

#### js
```javascript
import SmoothScroll from 'smooth-scroll-by';

new SmoothScroll();
```
#### CDN
JS
```html
<script defer src="https://cdn.jsdelivr.net/npm/smooth-scroll-by@1.2.0/dist/index.js"></script>
```
HTML
```html
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new SmoothScroll('a[href*="#"]');
        // or new SmoothScroll('.link');
        // or new SmoothScroll('[data-scroll-href]');
    });
</script>
```

## Parameters

If the page has a sticky menu, just add its class as the first parameter

```javascript
new SmoothScroll('a[href*="#"]', {
    offsetTop: '.js-fix-header'
});
```

You can also set the scroll speed (`default 600`)
```javascript
 new SmoothScroll('a[href*="#"]', {
    speed: 1000,
    offsetTop: '.js-fix-header'
});
```

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