jQuery Plugin For Creating One Page Multi Scrolling Website - multiScroll.js

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.