jQuery Animate Overlay That Makes You Scroll Between HTML Elements

ScrollBetweenElements is a jquery overlap that makes you pass the HTML elements smoothly and without the scrolling bar, it allows you to translate the elements into my parent’s DIV as well.

scroll behavior smooth speed, smooth scrolling from one page to a specific section in another page, scroll behavior smooth not working, smooth scrolling mouse wheel, smooth scrolling jquery

Features:

Supports both vertical and horizontal scrolling effects.
JQUERY UI Effects on the basis.
Specialized scroll speed.
The supported “hero” section.
The connection response functions are called once you pass the opposite element.
You can find more advanced illustrations in the examples folder.

How to make use of it:

1. Include the JQUERY Library and the JQUERY ScrollBetweenElements plugin on your web page.

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

2. JQUERY user interfaces if you want more mitigation effects.

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

3. Include the additional component JQUERY MOUSEWHEEL to enable the support of the mouse via 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 it 100 % increase and width.

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

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

6. Create the auxiliary program to enable the basic scroll effects from one page 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 uses.

// 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);

smooth fullscreen scrolling effect, ScrollBetweenElements Plugin/Github, css scroll behavior speed, smooth scroll javascript