Full Page Scroll
Lightweight, cross-browser jQuery full page scroll.
Installation
The plugin requires jQuery 1.8 or higher.
Via npm:
npm install @madter/fullpagescroll
Downloading Manually
If you want the latest stable version, get the latest release from the releases page.
0.9.2
Version 0.9.2 has been release. Still under development. If you have problem then go ahead and report the issue.
What is new
0.9.2
Support arrows for navigation.
Fix scrolling on touchpads.
0.9.1
Extended options. You dont need to have so strict html. Navigation.
Usage
<div id="fullPageScroll">
<section class="fp-block" data-fphash="first"> // have scrollClass
// content
</section>
<section class="fp-block">
<div class="fp-noscroll" data-fphash="second"> // have noScrollClass
// content with own scroll
</div>
// more content
</section>
</div>
$('#fullPageScroll').fullPage([settings]);
element
This should be element that contains sections that you want to scroll.
scrollClass (.fp-block)
Each element that should be scrolled must have this class.
noScrollClass (.fp-noscroll)
Element that should have its own scroll (overflow).
data-fphash
Each element with scrollClass must have data attribute that determine hash in url.
settings
These are the supported settings:
-
scrollClass: Class of section that you want to scroll. Default is
.fp-block
-
noScrollClass: Class of a element that can scroll itself (overflow). Default is
.fp-noscroll
-
breakpoint: On what size of window (width) you want deactivate full page scroll. Default is
991
-
nav: If you want display bullets navigation. Default is
true
-
scrollOffset: Offset of scroll. Default is
0
-
scrollEasing: Easing of animation. Default is
swing
-
scrollDuration: Scroll duration. Default is
500
-
resizeCheck: If you want to have check for resize window to determine if you reach breakpoint. Default is
true
-
changeUrl: If you hwish change url (you must have data atribut on scrollClass element). Default is
true
-
changeDataName: Data name for hash on scrollClass element. Default is
fphash
-
scrollOnLoad: If you whish to scroll on load. Default is
true
Changing the default settings
As with most plugins, the default settings are exposed so they can be changed.
$.extend($.fullPage.defaults, {
scrollClass: '.fp-block',
noScrollClass: '.fp-noscroll'
});
License
(The MIT License)
Copyright (c) 2019 Tomáš Surovčík
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.