28 Sep 2016

This article will take about 1 minute to read.
2 Comments

Before modern frameworks, I always used jQuery’s scrollTo method. At some point, not every project included jQuery, so I wrote simple function to animate window scroll.

I have kept copying that function from project to project. Finally I took some time, cleaned it up and published it on the npm (this is the first npm package I published).

Check the demo and read documentation of Github.

Find it on Github and npm

Installation

npm install animated-scroll-to

Usage

import animateScrollTo from 'animated-scroll-to';

// desiredOffset - page offset to scroll
// options - object with options

// default options
const options = {
  // duration of the scroll per 1000px, default 500
  speed: 500,

  // minimum duration of the scroll
  minDuration: 250,

  // maximum duration of the scroll
  maxDuration: 1500,

  // DOM element to scroll, default window
  // Pass a reference to a DOM object
  // Example: document.querySelector('#element-to-scroll'),
  element: window,

  // should animated scroll be canceled on user scroll/keypress
  // if set to "false" user input will be disabled until animated scroll is complete
  cancelOnUserAction: true
};

const desiredOffset = 1000;

animateScrollTo(desiredOffset, options);
Category
JavaScript

Comments (2)

Vojin
19 Oct 2016, 04:28 PM

Really cool stuff-nice and clean :)

Maison Armani
16 Nov 2016, 06:27 PM

Thanks... Just used it ,works fine and the code is clean

Leave a comment

Sending failed, please try again.
Thank you! Your comment is sent. Please note that all of the comments go through moderation.