https://github.com/valmisson/svelte-scrolling

Lightweight Svelte plugin to scroll to given elements with smooth animations
https://github.com/valmisson/svelte-scrolling

anchor animation navigation onepage scroll scrollto svelte3 sveltejs

Last synced: 4 days ago
JSON representation

Lightweight Svelte plugin to scroll to given elements with smooth animations

• Host: GitHub
• URL: https://github.com/valmisson/svelte-scrolling
• Owner: valmisson
• License: mit
• Created: 2021-03-17T00:45:46.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-12-03T20:28:59.000Z (about 1 month ago)
• Last Synced: 2024-12-22T15:11:28.387Z (11 days ago)
• Topics: anchor, animation, navigation, onepage, scroll, scrollto, svelte3, sveltejs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/svelte-scrolling
• Size: 361 KB
• Stars: 54
• Watchers: 3
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Scrolling

[![npm][npm-shields]](https://www.npmjs.com/package/svelte-scrolling)

[![license][license-shields]](https://github.com/valmisson/svelte-scrolling/blob/main/LICENSE)

Scroll to given elements with smooth animation.

## Install

```bash

yarn add svelte-scrolling

```

## Usage

```html

  import { scrollTo, scrollRef, scrollTop } from 'svelte-scrolling'

  Home

  About

  Blog

   scrollTop()}>Go to top

```

## Actions

#### `scrollTo={reference | options}`

This action listens for click (touchstart) events and scrolls to elements with smooth animation. The element to scroll to must be referenced using the `scrollRef` action or `id`.

Accepts as parameter only the element reference or all global options:

- `ref`: Element reference.

*To set the global options, the `ref` property is required*

#### `scrollRef={reference}`

This action adds a reference to the elements that `scrollTo` should scroll.

Accepts as parameter a string with the name to reference the element

## Functions

#### `scrollTop(options?)`

Scroll to the top of the page

#### `scrollBottom(options?)`

Scroll to the end of the page

#### `scrollLeft(options?)`

Scroll to the end of left the page

#### `scrollRight(options?)`

Scroll to the end of right the page

#### `scrollElement(reference, options?)`

Scroll to element with smooth animation.

#### `scrollPosition(position, options?)`

Scroll to a position on the page

## API

### Global Options

| Property | Default | Description |

|:--------:|:-------:|:-----------:|

| `duration` | `500` | Duration (in milliseconds) of the animation. |

| `offset` | `0` | Offset that should be applied when scrolling. |

| `easing` | `cubicInOut` | Easing function to be used when animating. Use any easing from [`svelte/easing`][svelte-easing] or a custom easing function. |

| `passive` | `false` | A boolean value that, if true, indicates that the function specified by listener will never call preventDefault(). |

| `onStart` | `noop` | A callback function that should be called when scrolling has started. Receives the element, offset, duration and endPosition as a parameter. |

| `onDone` | `noop` | A callback function that should be called when scrolling has started. Receives the element, offset, duration and endPosition as a parameter. |

### Override global options

```html

  import { setGlobalOptions } from 'svelte-scrolling'

  setGlobalOptions({

    duration: 800

  })

```

## License

[MIT](LICENSE)

Copyright (c) 2021-present, Valmisson Grizorte

[npm-shields]: https://img.shields.io/npm/v/svelte-scrolling.svg

[license-shields]: https://img.shields.io/badge/license-MIT-green

[svelte-easing]: https://svelte.dev/docs/svelte/svelte-easing