jQuery Plugin For Creating One Page Multi Scrolling Website - multiScroll.js
File Size: | 192 KB |
---|---|
Views Total: | 15226 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

multiScroll.js is an awesome jQuery plugin for one page scrolling website that allows to divide the web page into TWO vertical scrolling panels with navigation.
See also:
- jQuery Dynamic One Page Scrolling Plugin - Scrolld.js
- jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js
- Apple iPhone Website Like One Page Scroll Plugin For jQuery
- 10 Best Mobile-friendly One Page Scroll Plugins
How to use it:
1. Include the latest jQuery javascript library together with jquery.multiscroll.js and jquery.multiscroll.css in the Html page.
<link rel="stylesheet" href="jquery.multiscroll.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="jquery.multiscroll.js"></script>
2. Include the jQuery easing plugin for easing options (OPTIONAL).
<script src="vendors/jquery.easings.min.js"></script>
3. Create a navigation menu with anchor links pointing to the target sections you'd like to scroll to.
<ul id="menu"> <li data-menuanchor="firstSection"><a href="#firstSection">First slide</a></li> <li data-menuanchor="second"><a href="#second">Second slide</a></li> <li data-menuanchor="third"><a href="#third">Third slide</a></li> </ul>
4. Create main content for your web page.
<div id="myContainer"> <div class="ms-left"> <div class="ms-section" id="left1"> Left 1 </div> <div class="ms-section" id="left2"> Left 2 </div> <div class="ms-section" id="left3"> Left 3 </div> </div> <div class="ms-right"> <div class="ms-section" id="right1"> Right 1 </div> <div class="ms-section" id="right2"> Right 2 </div> <div class="ms-section" id="right3"> Right 3 </div> </div> </div>
4. Initialize and setup the plugin via javascript.
$('#myContainer').multiscroll({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'], anchors: ['firstSection', 'second', 'third'], menu: '#menu', navigation: true, loopBottom: true, loopTop: true, });
5. Available options and supported callback events.
$('#myContainer').multiscroll({ 'verticalCentered' : true, 'scrollingSpeed': 700, 'easing': 'easeInQuart', 'easingcss3': 'ease-out', 'menu': false, // custom selector of menu list 'sectionsColor': [], 'anchors':[], 'navigation': false, 'navigationPosition': 'right', // or 'left' 'navigationColor': '#000', 'navigationTooltips': [], 'loopBottom': false, 'loopTop': false, 'css3': true, 'paddingTop': 0, 'paddingBottom': 0, 'fixedElements': null, 'normalScrollElements': null, 'keyboardScrolling': true, 'touchSensitivity': 5, // Custom selectors 'sectionSelector': '.ms-section', 'leftSelector': '.ms-left', 'rightSelector': '.ms-right', // callbacks 'afterLoad': function(anchorLink, index){ // do something }, 'onLeave': function(index, nextIndex, direction){ // do something }, 'afterRender': function(){ // do something }, 'afterResize': function(){ // do something } });
6. API methods.
// scroll up $.fn.multiscroll.moveSectionUp(); // scroll down $.fn.multiscroll.moveSectionDown(); moveTo(section) // scroll to the first section $.fn.multiscroll.moveTo('firstSection'); // scroll to a specific section $.fn.multiscroll.moveTo(3); // enable/disable mouse wheel $.fn.multiscroll.setMouseWheelScrolling(false); // enable/disable keyboard interactions $.fn.multiscroll.setKeyboardScrolling(false); // set animation speed $.fn.multiscroll.setScrollingSpeed(700); // destroy $.fn.multiscroll.destroy(); // build plugin's events after destroy $.fn.multiscroll.build();
Changelog:
v0.2.3 (2021-05-16)
- Changed license to Commercial + Non-Commercial
- LicenseKey required
- Fixed bug: scrollToAnchor didn't work in all situations
- Fixed bug: scrollingSpeed option didn't work when using css3:true (now default)
- Fixed bug: Using nonexistent anchors in the URL showed an error message on console
- Fixed bug: using a very fast scrolling speed won't scroll multiple sections
- Enhancement: improved kinetic scroll experience (MacBook laptops, trackpads, magic mouse...)
- Enhancement: added option easingcss3 that allows configuring css3 easing function
- Enhancement: when using css3:false there won't be a need to load the easings file unless changing the easing option
2018-08-02
- v0.2.2
2018-03-08
- Fixing issue with scrollOverflow extension and touch devices.
2018-03-06
- Improving resizeHandler
This awesome jQuery plugin is developed by alvarotrigo. For more Advanced Usages, please check the demo page or visit the official website.