jQuery Smooth Scroll Plugin with Offset & Callback - ScrollEasy

Scroll Easy is a small jQuery plugin that animates clicks on internal anchor links to matching page sections. It attaches click handling to matched elements, reads the href value, locates the target element by its ID, and animates the document’s scroll position using $('html, body').animate(). It supports adjustable animation duration in milliseconds, easing options using jQuery’s built-in swing or linear patterns, and a top offset to compensate for fixed or sticky headers. A completion callback can run after the scrolling animation finishes. It works well for jQuery-based sites needing more control than CSS scroll-behavior: smooth, including one-page navigation, documentation with fixed navbars, long-form landing pages, and dashboards with persistent top bars.

"Scroll Easy is a tiny (~300 bytes) jQuery smooth scroll plugin that animates internal anchor links to matching page sections. You can use it to create smooth scroll navigation, scroll to section buttons, fixed header anchor links, and one page layout menus with adjustable speed, offset spacing, easing, and completion callbacks."

"The plugin uses standard anchor links, jQuery click handling, and $('html, body').animate() to move the document to the target element. It works well for existing jQuery websites where CSS scroll-behavior: smooth does not provide enough control over animation duration, offset distance, or post-scroll behavior."

"Features: Animates the viewport to any on-page ID-based anchor target on click. Adjustable scroll duration in milliseconds for precise timing control. Built-in top offset compensates for fixed or sticky header heights. Fires a completion callback once the animation finishes. Supports swing and linear easing patterns via jQuery's built-in animation engine."

"How to use it: 1. Download the plugin and place the main script jquery.scollEasy.min.js in your HTML page. <!-- jQuery must come first --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- ScrollEasy plugin --> <script src="/path/to/js/jquery.scrollEasy.js"></script> 2. Create a basic smooth scroll to an internal section. The plugin attaches a click handler to every matched element. When a user clicks a .nav-link, it reads the href attribute, finds the corresponding ID in the DOM, and animates scrollTop to that element's position."

Read at jQuery Script