Smooth Fullscreen Scrolling Effect with jQuery - ScrollBetweenElements

ScrollBetweenElements is a jQuery plugin designed for single page website / web app that turns a set of elements into fullscreen blocks and allows the visitor to scroll between them with smooth animations.

Features:

• Supports both vertical and horizontal scrolling effects.
• jQuery UI based easing effects.
• Custom scrolling speed.
• 'Hero' section supported.
• Callback functions called once the scroll to the corresponding element.
• You can find more advanced demos in the examples folder.

How to use it:

1. Include jQuery library and the jQuery ScrollBetweenElements plugin on your web page.

<script src="jquery.min.js"></script>
<script src="ScrollBetweenElements.js"></script>

2. Include jQuery UI if you want more easing effects.

<script src="jquery-ui.min.js"></scrip

3. Include the jQuery mousewheel plugin to enable mouse wheel support across browsers.

<script src="jquery.mousewheel.js"></script>

4. Create a set of DIV elements for content blocks.

<div id="div1">

</div>
<div id="div2">

</div>
<div id="div3">

</div>
<div id="div4">

</div>

5. Make them 100% height and width.

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  background-color: blue;
  height: 100%;
  width: 100%;
}

6. Initialize the plugin to enable basic one page scrolling effects on your website.

$(document).ready(function(){
  $('body,html').animate({ scrollTop: 0 }, 500);
  ScrollBetweenElements.init(400, "linear", true);
  ScrollBetweenElements.addElement($("#div1"));
  ScrollBetweenElements.addElement($("#div2"));
  ScrollBetweenElements.addElement($("#div3"));
  ScrollBetweenElements.addElement($("#div4"));
});

7. Advanced usages.

// duration: Time between each scrolls
// easing: jQuery UI easings.
// IsScrollBarHidden: Hides the default scrollbar
// HeightCorrection: Correction in pixel of the height value of the scroll.
ScrollBetweenElements.init(Duration, Easing, IsScrollBarHidden, HeightCorrection);

// element: jQuery selector
// isVerticalScroll: true of false
// callback: callback function
ScrollBetweenElements.addElement(element, isVerticalScroll, callback);

// Reset the position
ScrollBetweenElements.resetPosition();

// position: the position you wand to scroll to
// func: triggered once the setPosition function will be called
ScrollBetweenElements.setPosition(position, func);

Change logs:

2015-06-15

• Fix an issue using the keyboard arrows. That made you scroll too fast if you pushed it a multiple time in a row.

---

This awesome jQuery plugin is developed by Guillaume69. For more Advanced Usages, please check the demo page or visit the official website.