scrolls.js - smooth scrolling library.

scrolls.js is a tiny library to help provide smooth scrolling functionality for those that do not currently use another solution.

Table of Contents

1. Basic Info
2. Features
3. Getting Started
4. Installation
5. Usage
6. Examples
7. Documentation
8. Changelog
9. License

Basic Info

A smooth scrolling library built to provide convenience for developers.

Visit the landing page at scrollsjs.com to see a demo of the library in action!

If you like this project you may like our durations.js animated durations library!

Features

• Plug-and-play (unless you have other JavaScript that uses scrolls() already...)
• Number or selector-based targeting
• Allows a function to be called when scrolling has ended
• Customizeable duration of movement and offset position from the stop position
• Fully open source

Getting Started

Installation

You can install the library via npm:

npm i scrolls.js

or via CDN:

<!-- Source Version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/scrolls.js"></script>
<!-- Minified Version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/scrolls.min.js"></script>

Usage

scrolls(0); // Scroll to the top of the page.

scrolls('h1', {
  durationOfMovement: 5000 // Defaults to 1000, or 1 second.
});

Examples

Please see scrollsjs.com for the examples and a demo of them working on the website.

Documentation

// Default customizeable variables via an object within the second parameter
// of the function.

let callback; // Function to execute after scrolling has ended
let durationOfMovement = 1000; // Duration of the scrolling
let offsetPosition = 0; // Distance to offset from the stop position

// Pass in an object as the second parameter to customize the behavior.

scrolls('h1', {
  callback: () => {
    console.log('Scrolling has finished.');
  }
});

// The first parameter could be a number or string and is used as the target of
// the scrolling event, for example 0 would be the top of the page, or h1 to
// scroll to the first h1 element.

Changelog

Please see CHANGELOG.md for details.

License

MIT

Copyright (c) 2018 Purplest, Inc.