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

Unfortunately, I have some problems with the comment system I'm using. If you can't submit a comment, please wait one minute and try again. I'm sorry for the inconvenience, I'm working on it.
Sending failed, please try again.
Thank you! Your comment is sent. Please note that all of the comments go through moderation.