smoothie-jsdeprecated

A vanilla smooth-scrolling javascript plugin with no dependencies.

Usage no npm install needed!

<script type="module">
  import smoothieJs from 'https://cdn.skypack.dev/smoothie-js';
</script>

README

Smoothie.js Build Status

A vanilla smooth-scrolling javascript plugin with no dependencies.

Features

Demo

Example page on codepen (temporary), check the pen here.

Install

# Using npm
npm install smoothie-js

# Using yarn
yarn add smoothie-js

Now include smoothie and you should be good to go.

// es6
import smoothie from 'smoothie'

// commonjs
const smoothie = require('smoothie');

Alternatively you can include a minified version of smoothie (or the source code, up to you) via direct file or using our CDN link.

<body>
  <script src="https://unpkg.com/smoothie-js"></script>
</body>

Usage

Add data-smoothie to your anchor tags and the target's id in the href value as it follows below.

<a data-smoothie href="#example">...</a>

<!-- Somewhere below -->

<section id="example">
  ...
</section>

Call smoothie's function anywhere in your code:

// Call me
smoothie();

Configuring

To configure the plugin pass the desired option(s) as an object like the example below:

// Pass options like this
smoothie({
  behavior: 'auto'
});

Running Tasks

You can run tasks with yarn or npm shorthands using the following commands:

# Build task
$ yarn build

# etc.
$ ...

Browser Support

You can check the browsers supported here.

If your browser is not in the list consider using a polyfill.

Roadmap

Todo List

  • Make a better example page.
  • Add polyfill to non-supported browsers.
  • Add options to the plugin.
  • Refactor to remove bad code practices.

Legend: Checked boxes mean partial completion, checked and crossed items mean they're fully working.

Contributing

If you feel like smoothie is missed something please do send a message or, alternatively make a pull request or even open an issue using an appropriate label and we will go from there.

License

Code released under the MIT license.