Scroll Smoothly To Any Position On The Page - jQuery SmoothScrolling

File Size: 16.9 KB
Views Total: 676
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Scroll Smoothly To Any Position On The Page - jQuery SmoothScrolling

A tiny jQuery smooth scroll plugin that allows you to scroll the page vertically and smoothly to any position of the document.

The best part of this plugin is that it allows you to bind the smooth scroll behavior to any events like touch tap and mouse click, not only anchor links.

See Also:

How to use it:

1. Load the main script SmoothScrolling.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/SmoothScrolling.js"></script>

2. Scroll the page to a specific position:

smoothScrolling.scrollToTargetY(targetYInPixels);

3. Bind the smooth scroll behavior to any events as follows:

// for Safari
let allowScrolling = true; 

$(window).on("touchmove", function(e) {
  // for Safari
  allowScrolling = false; 
});

$(window).on("click touchend", function(e) {
  if (e.target.tagName != "A" && allowScrolling) { 
    // for Safari
    event.stopPropagation();
    event.preventDefault();

    const maxHeight = $(document).height();
    const randomPercentage = Math.random();
    const randomHeight = randomPercentage * maxHeight;

    smoothScrolling.scrollToTargetY(randomHeight);
  }
  else
    // for Safari
    allowScrolling = true; 
});

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