Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify
File Size: | 14.4 KB |
---|---|
Views Total: | 46827 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Scrollify is a jQuery plugin that enhances your one page scrolling website experience by providing snapping behavior as you scroll down the page.
Features:
- Scrolls through a set of sections with arrow keys, mouse move or touch swipe.
- Snaps to sections when scrolling down/up.
- Has the ability to hide the scrollbar.
- Auto updates url locations on scroll.
- Easing effects & callbacks supported.
- Cross browser & cross device.
- Touch events supported as well.
See also:
- jQuery Plugin For Animated Vertical Scroll Snapping - Scrollsnap
- 10 Best Mobile-friendly One Page Scroll Plugins
- jQuery Plugin For Smooth Scroll Snapping - panelSnap
- jQuery Snap Scrolling Plugin For Single Page Website - snapscroll
How to implement:
1. Load the latest version of jQuery javascript library and the jQuery scrollify plugin at the end of your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.scrollify.js"></script>
2. Load the jQuery easing plugin from a CDN for easing options (Optional).
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
3. Create a set of sections for your one page website.
<section> Section 2 </section> <section> Section 2 </section> <section> Section 3 </section> ..
4. Call the plugin on the sections.
$(function() { $.scrollify({ section : "section" }); });
5. Optional settings with default values.
$(function() { $.scrollify({ // section should be an identifier that is the same for each section // A selector for the sections. section: "section", // Scrollify lets you define a hash value for each section. // This makes it possible to permalink to particular sections. // This is set as a data attribute on the sections. // The name of the data attribute is defined by 'sectionName'. sectionName: "section-name", // A CSS selector for non-full-height sections, such as a header and footer. interstitialSection: "", // Define the easing method. easing: "easeOutExpo", // Scrolling speed in milliseonds scrollSpeed: 1100, // A distance in pixels to offset each sections position by. offset : 0, // A boolean to define whether scroll bars are visible or not. scrollbars: true, // Target container target:"html,body", // A string of selectors for elements that require standard scrolling behaviour. standardScrollElements: false, // A boolean to define whether Scollify assigns a height to the sections. setHeights: true, // Allows scrolling over overflowing content within sections overflowScroll:true, // Updates the browser location hash when scrolling through sections updateHash: true, // Allows to handle touch scroll events touchScroll:true, // callbacks before:function() {}, after:function() {}, afterResize:function() {}, afterRender:function() {} }); });
6. Methods.
// Used to scroll to a particular section. // It can be parsed the index of the section, or the name of the section preceded by a hash. $.scrollify.move("#name"); // Used to scroll to a particular section without animation. // It can be parsed the index of the section, or the name of the section preceded by a hash. $.scrollify.instantMove("#name"); // Used to scroll to a panel that immediately follows the current panel. $.scrollify.next() // Used to scroll to a panel that immediately precedes the current panel. $.scrollify.previous() // Used to scroll to a panel that immediately follows the current panel, without animation. $.scrollify.instantNext() // Used to scroll to a panel that immediately precedes the current panel. $.scrollify.instantPrevious() // Removes all Scrollify events and removes set heights from the panels. $.scrollify.destroy() // The update methods recalculates the heights and positions of the panels. $.scrollify.update() // The current method returns the current section as a jQuery object. $.scrollify.current() // The disable method turns off the scroll snap behaviour so that the page scroll like normal. $.scrollify.disable() // The enable method resumes the scroll snap behaviour after the disable method has been used. $.scrollify.enable() // The isDisabled method returns true if Scrollify is currently disabled, otherwise false. $.scrollify.isDisabled()
Changelog:
2021-04-25
- JS updated
2020-11-20
- update events
2019-08-16
- Update jquery.scrollify.js
2019-07-29
- fix height on getportHeight to respect iOS different height in its menubars
2019-03-25
- JS updated
2019-03-19
- JS updated
2019-02-22
- Fixing infinity loop on afterRender
2018-09-25
- Fix setHeights Option
2018-03-20
- Respecting standardScrollElements in the keyHandler.
2017-12-15
- v1.0.19: Update
2017-08-04
- v1.0.17: Fixed Key event handler with Input types
2017-07-30
- v1.0.15: Disabling keyHandler callbacks when a textarea/select tag is focused
2017-03-11
- v1.0.13: bugfix
2017-01-21
- v1.0.12: fixed scrolling with scrollbar
2017-01-07
- v1.0.11: ammend keycodes
2017-01-05
- v1.0.10: add page up and page down keys
2016-12-13
- v1.0.9: add touchScroll option
2016-11-29
- v1.0.8: fix commonjs issue
2016-11-17
- v1.0.7: fix issue with moving to the top of sections
2016-11-05
- v1.0.6: shorten warning messages
2016-10-02
- v1.0.5
2016-07-27
- minor bugfix
2016-07-13
- fix issue with interstitialSections sections
2016-07-05
- JS update
2016-06-02
- add interstitialSection
2016-04-06
- add AMD and CommonJS support
2016-03-14
- multiple updates and bug fixes
2016-02-04
- bug fixes and new options - afterRender callback and standardScrollElements property
2015-10-27
- more methods and fix for kinetic scroll issue
2015-09-08
- update for destroy method
2015-09-05
- update for destroy method
2015-08-22
- momentum scrolling fix
2015-08-13
- new methods.
2015-08-08
- fix issue with scrolling to the bottom of the final panel on touch devices
2015-08-02
- significant updates including news methods, fix for issues with trackpads and Apple mice, sizing of panels is now handled internally
2015-02-02
- update
2015-01-16
- fix issues around touch
2015-01-07
- recalculate section positions on resize
2014-11-03
- fix link touch issue
2014-06-30
- fix for issue around not setting sectionNames
This awesome jQuery plugin is developed by lukehaas. For more Advanced Usages, please check the demo page or visit the official website.