Skip to content

gabrieljmj/fuckmyscroll.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FuckMyScroll

Animated scrolling to certain point or anchor.

You can see a demo here.

Installing

Install via npm

$ npm install --save fuckmyscroll

Usage

In your script, create an instance of FuckMyScroll

const fms = new FuckMyScroll();
fms.init();

Working with anchors

Truly is not necessary be an anchor, but have href and fmscroll attributes.

<button href="#about" fmscroll>About</button>

<!-- Goes to -->
<article id="about">
  <!-- ... -->
</article>

Going to page points

Scroll by cordenates

let X = 0,
  Y = 1200;

fms.scrollTo(X, Y);

Options

const fms = new FuckMyScroll({
  speed: 14, // 14px/ms,
  init: () => {},
  end: () => {}
});
  • speed It is possible determine the speed, measured in pixels/milliseconds. Default is 7px/ms.
{
  speed: 20 // 20px/ms
}
  • init Callback executed on proccess initiation.
{
  init: () => { // ... }
}
  • end Callback executed on proccess finalization.
{
  end: () => { // ... }
}

Events

It is possible execute specific events for each anchors using fms-init and fms-end attributes with global functions:

<a href="#about" fmsscroll fms-init="prepareAbout" fms-end="showAbout">About</a>

<script>
  /* Global scope */
  function prepareAbout() {
    //...
  }

  function showAbout() { 
    // ...
  }

  window.onload = () => {
    // ...
  }
</script>