scrolls.js is a tiny library to help provide smooth scrolling functionality for those that do not currently use another solution.
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!
- 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
You can install the library via npm:
npm i scrolls.jsor via CDN:
<!-- Source Version -->
<script src="https://cdn.jsdelivr.net/npm/scrolls.js@1.0.18/scrolls.js"></script>
<!-- Minified Version -->
<script src="https://cdn.jsdelivr.net/npm/scrolls.js@1.0.18/scrolls.min.js"></script>scrolls(0); // Scroll to the top of the page.
scrolls('h1', {
durationOfMovement: 5000 // Defaults to 1000, or 1 second.
});Please see scrollsjs.com for the examples and a demo of them working on the website.
// 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.Please see CHANGELOG.md for details.
MIT
Copyright (c) 2018 Purplest, Inc.