Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gabrieljmj/fuckmyscroll.js
:crystal_ball: Animated scrolling to certain point or anchor
https://github.com/gabrieljmj/fuckmyscroll.js
anchor scroll scrolling
Last synced: about 2 months ago
JSON representation
:crystal_ball: Animated scrolling to certain point or anchor
- Host: GitHub
- URL: https://github.com/gabrieljmj/fuckmyscroll.js
- Owner: gabrieljmj
- License: other
- Created: 2016-04-22T22:16:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-10T20:09:56.000Z (almost 8 years ago)
- Last Synced: 2024-10-05T04:43:54.395Z (3 months ago)
- Topics: anchor, scroll, scrolling
- Language: JavaScript
- Homepage: http://gabrieljmj.github.io/fuckmyscroll.js/demo.html
- Size: 288 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
FuckMyScroll
============
Animated scrolling to certain point or anchor.
You can see a demo [here](http://gabrieljmj.github.io/fuckmyscroll.js/demo.html).
## Installing
Install via [npm](http://npmjs.com/package/fuckmyscroll)
```bash
$ npm install --save fuckmyscroll
```
## Usage
In your script, create an instance of ```FuckMyScroll```
```js
const fms = new FuckMyScroll();
fms.init();
```
### Working with anchors
Truly is not necessary be an anchor, but have ```href``` and ```fmscroll``` attributes.
```html
About
```
### Going to page points
Scroll by cordenates
```js
let X = 0,
Y = 1200;
fms.scrollTo(X, Y);
```
### Options
```js
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```.
```js
{
speed: 20 // 20px/ms
}
```
* **init**
Callback executed on proccess initiation.
```js
{
init: () => { // ... }
}
```
* **end**
Callback executed on proccess finalization.
```js
{
end: () => { // ... }
}
```
### Events
It is possible execute specific events for each anchors using ```fms-init``` and ```fms-end``` attributes with **global functions**:
```html
About
/* Global scope */
function prepareAbout() {
//...
}
function showAbout() {
// ...
}
window.onload = () => {
// ...
}
```