svelte-scrolling
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Svelte Scrolling

    npm license

    Scroll to given elements with smooth animation.

    Install

    yarn add svelte-scrolling

    Usage

    <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>
    
    <section use:scrollRef={'home'}></section>
    <section use:scrollRef={'about'}></section>
    <section use:scrollRef={'blog'}></section>
    
    <button on:click={() => scrollTop()}>Go to top</button>

    Actions

    scrollTo={reference | options}

    This action listens for click (touchstart) events and scrolls to elements with smooth animation.

    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

    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 or a custom easing function.

    Override global options

    <script>
      import { setGlobalOptions } from 'svelte-scrolling'
    
      setGlobalOptions({
        duration: 800
      })
    </script>

    License

    MIT

    Copyright (c) 2021 Valmisson Grizorte

    Install

    npm i svelte-scrolling

    DownloadsWeekly Downloads

    27

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    21.9 kB

    Total Files

    26

    Last publish

    Collaborators

    • valmisson