Repository files navigation

Animating vertical and horizontal scrolling (for Svelte)

• TypeScript / JavaScript
• Useful options
• Compatible withSvelteKit,SSR andadapter-static

npm install svelte-scrollto-element --save# yarn add svelte-scrollto-element

<script>import{animateScroll}from'svelte-scrollto-element';</script><aon:click={() => animateScroll.scrollToBottom()}> Scroll to bottom</a><aon:click={() => animateScroll.scrollToTop()}> Scroll to top</a><aon:click={() => animateScroll.scrollTo({element: '#my-anchor'})}> Scroll to element with</a><aon:click={() => animateScroll.scrollTo({element: '.my-element-class', offset: 200})}> Scroll to below element 200px</a><aon:click={() => animateScroll.scrollTo({element: 'footer', duration: 2000})}> Scroll to footer element over 2000ms</a>

<script>import{scrollto}from'svelte-scrollto-element';</script><!-- Parameter is element selector or options --><ause:scrollto={'#scroll-element'}> Scroll to element</a>

Override global options:

import{animateScroll}from'svelte-scrollto-element';animateScroll.setGlobalOptions({offset:200,onStart:(element,offset)=>{if(element){console.log('Start scrolling to element:',element);}elseif(offset){console.log('Start scrolling to page offset: (${offset.x}, ${offset.y})');}}});

Accepts all global options and:

• element: The element you want scroll to
• x: The offset we want to scrolling on the x axis
• y: The offset we want to scrolling on the y axis

Shortcut of use scrollTo withx equal to0.

Shortcut of use scrollTo withx equal tocontainerHeight

Svelte action that listens forclick (touchstart) events and scrolls to elements with animation.

• scrollto

• scrolltotop

• scrolltobottom

If you want to use Lazy and want to scroll to elements, you need to give your lazy components (images, v.v..) fixed dimensions, so the browser known the size of the not loaded elements before scrolling.

Initially forked fromlangbamit/svelte-scrollto which is archived now. Uses some of its code and functionality!

I DO NOT STORE ANY DATA. PERIOD.

I physically can't. I have nowhere to store it. I don't even have a server database to store it. So even if Justin Bieber asked nicely to see your data, I wouldn't have anything to show him.

That's why, with this library, what happens on your device stays on your device till disappear.

Initially forked fromlangbamit/svelte-scrollto which is archived now.

Proudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)

All contents are licensed under theMIT license.