npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bryanwood/smoothscroll

v0.4.0

Published

(forked from `alicelieutier/smoothscroll`) A teeny tiny smooth scroll script with ease-in-out effect and no jQuery.

Downloads

43

Readme

smoothScroll

A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no dependancy.

smoothScroll will tie all your internal links to a handler that will produce a smooth scroll to their target instead of an instant jump. It also returns an API that you can use to call a smooth scroll yourself.

This works in Firefox, Chrome, IE10, Opera and Safari. Unsupported browsers would just use the normal internal link behaviour.

How to use

Just include smoothscroll inside your page, like this:

<script type="text/javascript" src="path/to/smoothscroll.min.js"></script>

All your internal links will be tied to a smooth scroll. If you want to call a smooth scroll from your code, you can now use the API by calling:

window.smoothScroll(target, duration, callback, context)

where:

  • target is a HTMLElement Object from your document that you want to scroll to, or a numeric position on the page
  • duration is the total duration of the scroll (optional, defaults to 500ms)
  • callback is a function to be executed when the scrolling is over (optional)
  • context is the scrolling context (optional, defaults to window, can be any HTMLElement Object)

Alternatively, you can install smoothscroll as a dependency using npm:

npm install --save smoothscroll

Example usage as a module, binding to a custom element:

var smoothScroll = require('smoothscroll');

var exampleBtn = document.querySelector('.example-button');
var exampleDestination = document.querySelector('.example-destination');

// This function can easily be an onClick handler in React components
var handleClick = function(event) {
  event.preventDefault();

  smoothScroll(exampleDestination);
};

exampleBtn.addEventListener('click', handleClick);

smoothscroll.js

Here are some indications if you want to tweak the code to fit your needs:

There is an ease-in-out type timing function. You can change it quite easily in the code. Here is where I found the one I use:

  • http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/

You can also change the default duration of a scroll, which is 500ms by default.

My code is heavily commented so you shoudn't lose yourself too much.

Example

The example.html file is basically the script applied to a w3c page. I just changed the style so the table of content is fixed to the left.

Check out the result. Wouldn't it be great if all w3c specs where that easy to navigate in?

Similar scripts

While I was looking for a name for this script, I found these sites. If this script is not what you need, you might have more luck there:

  • http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
  • http://www.kryogenix.org/code/browser/smoothscroll (best cross browser compatibility)

License

This library is released under the MIT license.