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


  • 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 id="div2">

<div id="div3">

<div id="div4">


5. Make it 100 % increase and width.

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.

  $('body,html').animate({ scrollTop: 0 }, 500);
  ScrollBetweenElements.init(400, "linear", true);

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

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

See Demo And Download

Official Website(Guillaume69): Click Here

This superior jQuery/javascript plugin is developed by Guillaume69. For extra advanced usage, please go to the official website.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…


Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…