Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cloudratha/active-scroll-js
jQuery Plugin for Smooth Scrolling with Anchor Highlighting
https://github.com/cloudratha/active-scroll-js
Last synced: about 1 month ago
JSON representation
jQuery Plugin for Smooth Scrolling with Anchor Highlighting
- Host: GitHub
- URL: https://github.com/cloudratha/active-scroll-js
- Owner: cloudratha
- Created: 2016-04-07T09:23:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-04-09T15:14:59.000Z (over 8 years ago)
- Last Synced: 2024-11-09T16:54:37.335Z (about 1 month ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ActiveScroll.js [](https://travis-ci.org/cloudratha/active-scroll-js)
This jQuery plugin allows for Smooth Scrolling with Anchor Highlighting.
ActiveScroll.js determines which targeted element is closer to the page scroll position and highlights that anchor.
It provides a smooth scrolling feature with an onclick event attached to a customised data attribute.
Highlighting will only apply to anchors in the initiated container. However all links with the data attribute will have the scrollTo feature.
```js
$('nav').activescroll({
scroll: "scroll",
active: "active",
offset: 20,
animate: 1000
});
```
# Installation
### NPM
Make sure you have [node.js](https://nodejs.org/en/) installed. It comes bundled with [npm](https://www.npmjs.com/)
```bash
npm install active-scroll --save
```
### Bower
Make sure you have [bower](http://bower.io/) installed.
```bash
bower install active-scroll --save
```
# Usage
Make sure you have a **data attribute** that references the **id** of the element that the page will be scrolled to.
```html
- Introduction
- Basic
...
Introduction
...
Hello World
```
Inititate the plugin on the element that contains all the data bindings.
```js
$('nav').activescroll();
```
# Settings
### data (default: scroll)
The data setting looks for the data attribute to define the anchor tags. For compatability with other plugins you can change the bind in the options.
```html
- Introduction
- Basic
```
```js
$('nav').activescroll({
data: "link"
});
```
### active (default: active)
The active setting determines the class name to attach to the anchor if it highlighted.
```html
- Introduction
- Basic
```
```js
$('nav').activescroll({
active: "highlight"
});
```
So if Introduction was determined to be the active Anchor:
```html
- Introduction
- Basic
```
### offset (default: 20)
The offset setting determines the offset of the scrollTo position.
```js
$('nav').activescroll({
offset: 10
});
```
### animate (default: 1000)
The animate setting determines the ms the scrollTo should take.
```js
$('nav').activescroll({
animate: 2000
});
```