https://github.com/firstandthird/smooth-scroller

Javascript lib to handle smooth scrolling
https://github.com/firstandthird/smooth-scroller

Last synced: 14 days ago
JSON representation

Javascript lib to handle smooth scrolling

• Host: GitHub
• URL: https://github.com/firstandthird/smooth-scroller
• Owner: firstandthird
• License: mit
• Created: 2014-05-15T16:03:04.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T15:23:05.000Z (about 2 years ago)
• Last Synced: 2025-01-08T22:08:04.234Z (24 days ago)
• Language: HTML
• Size: 1020 KB
• Stars: 0
• Watchers: 8
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Smooth-scroller

![npm](https://img.shields.io/npm/v/smooth-scroller.svg?style=for-the-badge)

A tiny, ES6 JavaScript lib to handle smooth scrolling.

## Installation

```sh

npm install smooth-scroller

```

## Usage

See the [full example](./example).

### Javascript

```js

import 'smooth-scroller';

```

### HTML

```html

Scroll Smoothly

...some content...



```


## Events

Custom events are fired on the element:

| Event                | Description          |

|----------------------|----------------------|

| `smoothscroll:start` | Smooth scroll starts |

| `smoothscroll:end`   | Smooth scroll ends   |

## Methods

Smooth-scroller exposes two methods:

### init(_[selector='[data-smooth]'], [offset=0]_)

Enables smooth-scroller on the elements matched by `selector`.

#### Parameters

`selector='[data-smooth]'` - _{String}_ - Elements that will trigger smooth-scroll call once they're clicked

`offset=0` - _{Number}_ - Controls the distance (negative or positive) between the top border of the element and the top border of the window.

### scroll(target, hash, _[offset=0], [silent=false]_)

`target` - _{string|Element|NodeList}_ - Target element to scroll

`hash` - _{string|Element|NodeList}_ - DOM element ID to scroll

`offset=0` - _{Number}_ - Controls the distance (negative or positive) between the top border of the element and the top border of the window.

`silent=false` - _{Boolean}_ - If enabled, will generate a [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History_API) event