svelte-scrolling

KO | EN

gitlite — search

#python #typescript #java #nodejs #hacktoberfest #javascript #python3 #machine-learning #game #android #graphql #genetic-algorithm

svelte-scrolling

★ 58 Open GitHub ↗

Lightweight Svelte plugin to scroll to given elements with smooth animations

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<script>
  import { scrollTo, scrollRef, scrollTop } from 'svelte-scrolling'
</script>

<nav>
  <a use:scrollTo={'home'}>Home</a>
  <a use:scrollTo={'about'}>About</a>
  <a use:scrollTo={{ ref: 'blog', duration: 1000 }}>Blog</a>
</nav>

<ScrollTop>
  <button on:click={() => scrollTop()}>Go to top</button>
</ScrollTop>
```

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

### Override global options

```html
<script>
  import { setGlobalOptions } from 'svelte-scrolling'

setGlobalOptions({
    duration: 800
  })
</script>
```

## License
[MIT](LICENSE)

[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

svelte-scrolling

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README