This plugin is dedicated to one pagers where a navigation is fixed on the screen so that the user can switch from one section to another. Note that jQuery serialscrolling is shared for inspirational and development purpose.
See the project page for a demonstration.
jQuery serialscrolling has been tested in: IE, Edge, Chrome (mobile included), Firefox (mobile included), and Safari (mobile included).
Download and save one of two available files to include serialscrolling to your page, either the development or the minified version. Also, you can visit the project page to copy what you need.
<script src="jquery.serialscrolling.min.js"></script>Make sure jQuery is properly loaded before using jQuery serialscrolling.
The basic usage of serialscrolling is pretty easy, just start using jQuery serialscrolling by calling it after page load.
<ul>
<li data-serialscrolling="home">Home</li>
<li data-serialscrolling="work">Work</li>
<li data-serialscrolling="team">Team</li>
</ul>
<div data-serialscrolling-target="home">Section 1</div>
<div data-serialscrolling-target="work">Section 2</div>
<div data-serialscrolling-target="team">Section 3</div>$(document).ready(function(){
// jquery.serialscrolling initialisation
$('[data-serialscrolling]').serialscrolling();
});The following configurations is available by default:
| Name | Type | Default | Description |
|---|---|---|---|
| targetSelector | string | '[data-serialscrolling-target]' | The selector to identify the targets (usually sections) |
| getTarget | function | See jquery.serialscrolling.js | The function to retrieve the target element (usually sections) |
| getTrigger | function | See jquery.serialscrolling.js | The function to retrieve the trigger element |
| duration | integer | 800 | The delay for the scroll animation |
| easing | string | 'easeInOutExpo' | The effect for the scroll animation |
| offsetTop | integer | 0 | The offset top when scrolling to a specific section |
| callback | function | false | A callback called when a new trigger is set (useful for Google Analytics tracking) |
Please report bugs and feel free to ask for new features directly on GitHub.
jQuery serialscrolling is licensed under MIT license.