<p align="center"> <a href="https://github.com/CristianDavideConte/universalSmoothScroll/projects"> <img src="https://img.shields.io/badge/What's%20next-%3F-009EFF" width="90" height="20"/> </a> <img width="20"/> <!-- Just empty space --> <a href="./docs/Download.md"> <img src="https://img.shields.io/github/v/release/CristianDavideConte/universalSmoothScroll?color=rgba%2850%2C200%2C80%29&label=Version&logo=github"/> </a> <img width="20"/> <!-- Just empty space --> <a href="./docs/Download.md"> <img src="https://img.shields.io/npm/v/universalsmoothscroll?color=rgb%28255%2C50%2C50%29&label=%20Version&logo=npm"/> </a> <img width="20"/> <!-- Just empty space --> <a href="./docs/Download.md"> <img src="https://data.jsdelivr.com/v1/package/npm/universalsmoothscroll/badge"/> </a> <img width="20"/> <!-- Just empty space --> <a href="https://www.paypal.com/donate?hosted_button_id=9ZH3MVR56C7M8"> <img id="donate" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/PayPal.svg/1920px-PayPal.svg.png" height="20" width="80"/> </a> </p>

<br/><p align="center">
<a href="https://github.com/CristianDavideConte/universalSmoothScroll">
<img src="./docs/images/logo.png" height="140">
</a>

</p> <h1 align="center">Universal Smooth Scroll</h1>

A lightweight and very fast javascript library that provides enriched versions of the browsers' scrolling APIs with support for smooth-scrolling, callbacks and many other features. <br/>
Multiple scroll-animations on one or more containers can be played at the same time with full controll over them. <br/>
Every scroll-animation triggered by the API can be interrupted at any time and supports user-defined custom ease functions. <br/>
This API is also fully compatible with Typescript, React.js, Next.js and many other javascript frameworks. <br/>

You can try most of the features on:

• The Official Playground
• My Website

---

<br/>

Table of Contents

<table> <thead> <th>Main Sections</th> </thead> <tbody> <tr> <td align = "center"> <a href = "./docs/Download.md"><code>Download</code></a> </td> </tr> <tr> <td align = "center"> <a href = "./docs/Installation.md"><code>Installation</code></a> </td> </tr> <tr> <td align = "center"> <a href = "./docs/HowItWorks.md"><code>How it works</code></a> </td> </tr> <tr> <td align = "center"> <a href = "./docs/FunctionsAbout.md"><code>Available Functions</code></a> </td> </tr> <tr> <td align = "center"> <a href = "./docs/FAQ.md"><code>F.A.Q.</code></a> </td> </tr> <tr> <th align = "center"> Additional Libraries </th> </tr> <tr> <td align = "center"> <a href = "./docs/EaseFunctions.md"><code>Ease-Functions</code></a> </td> </tr> <tr> <td align = "center"> <a href = "./docs/DevHelpers.md"><code>Dev-Helpers</code></a> </td> </tr> <tr> <th align = "center"> Advanced Sections </th> </tr> <tr> <td align = "center"> <a href = "./docs/ConstantsAbout.md"><code>Internal Constants</code></a> </td> </tr> <tr> <td align = "center"> <a href = "./docs/VariablesAbout.md"><code>Internal Variables</code></a> </td> </tr> </tbody> </table>

---

<br/>

Browser Compatibility

Browser	Support
IE	❌
Edge	✔️
Firefox	✔️
Chrome	✔️
Safari	✔️
Opera	✔️
Safari for iOS	✔️
Opera mini	✔️
Android browser	✔️
Opera mobile	✔️
Chrome for Android	✔️
Firefox for Android	✔️
UC Browser for Android	✔️
Samsung Internet	✔️
Baidu Browser	✔️
QQ Browser	❔
KaiOS Browser	❔

---

<br/>

Support Me

If you want to support my work you can simply ⭐ the project. <br/>

If you want to offer me a cappuccino (don't like plain coffe, sorry) you can make a donation by either using the PayPal donate button above or the GitHub sponsor button. <br/>

Support is highly appreciated but it's not compulsory in any way in order to use any of my work.

---

<br/>

Contact Me

If you find a bug, have a suggestion, a feature request, or if you simply want to contact me, use my website. <br/>
Feel free to reach out!