repository·master·Indexed 25 days ago
https://github.com/flesler/jquery.scrolltoA lightweight, cross-browser, and highly customizable jQuery plugin for performing animated scrolling within a scrollable element or the window. Version 2.1.3 requires jQuery 1.8 or higher. It supports various target formats including selectors, DOM elements, coordinates, and the 'max' position. Key features include axis control, animation interrupts, and a global defaults configuration via $.scrollTo.defaults.
Since the plugin uses standard jQuery animations, you can stop an ongoing scroll by calling $.stop() or $.finish() on the element that was being scrolled (including $(window)).
You can use the fail() callback to execute code when the animation is stopped (for example, if interrupt: true is set).
The plugin requires jQuery 1.8 or higher. You can install it via several package managers or use a public CDN.
npm
npm install jquery.scrolltobower
bower install jquery.scrollToComposer (Packagist)
php composer.phar require --prefer-dist flesler/jquery.scrollto "*"Public CDN (jsdelivr)
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>Public CDN (cdnjs)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>The settings object allows you to customize the scrolling behavior. You can also include any options supported by jQuery's $.animate().
Plugin-specific settings:
axis: The axes to animate: xy (default), x, y, yxinterrupt: If true, cancels the animation if the user scrolls. Default is falselimit: If true, the plugin will not scroll beyond the container's size. Default is truemargin: If true, subtracts the margin and border of the target element. Default is falseoffset: Added to the final position (number or {left, top})over: Adds a % of the target dimensions (e.g., {left:0.5, top:0.5})queue: If true, scrolls one axis and then the other. Default is falseonAfter(target, settings): Callback triggered when the animation ends.onAfterFirst(target, settings): Callback triggered after the first axis scrolls when queue is true.jQuery animate() settings:
duration: Duration of the animation (default is 0, which is instantaneous)easing: Name of an easing equation (e.g., "swing")fail(): Callback triggered when the animation is stopped (e.g., via interrupt)step(): Callback triggered for every animated property on every frameprogress(): Callback triggered on every frameError: Cannot read property 'propHooks' of undefined
This occurs if you are using the slim version of jQuery. The slim version does not include the effects module required by this plugin. Switch to the full version of jQuery.
Issue: The element doesn't scroll
Verify that the element is actually scrollable by temporarily setting overflow: auto in your CSS. If no scrollbar appears, the issue is likely in your HTML/CSS structure rather than the plugin.
The onAfter callback is triggered before the scroll event fires. If you need to perform DOM manipulations that depend on the final scroll position, it is recommended to wrap your logic in requestAnimationFrame to ensure it runs on the next tick.
$.scrollTo(100, {
onAfter: function() {
requestAnimationFrame(function() {
$(".result").addClass("selected");
});
}
});You can modify the global default settings for all instances of the plugin using $.extend on $.scrollTo.defaults.
$.extend($.scrollTo.defaults, {
axis: 'y',
duration: 800
});The plugin's signature resembles $(element).animate(). Use it to scroll a specific element to a target position.
Signature:
$(element).scrollTo(target[,duration][,settings]);
$(window) to scroll the entire window.250"250px""50%""+=50px"{left:250, top:"50px"}"max" to scroll to the end.".section:eq(2)"document.getElementById("top")$("#top")duration setting.Window Shorthand:
You can use $.scrollTo(...) as a shorthand for $(window).scrollTo(...).
$(element).scrollTo(target[,duration][,settings]);You can pass a settings object as the third argument to .scrollTo() to customize the animation behavior.
Available Settings:
axis: String specifying the axes to scroll. Options: 'x', 'y', or 'xy' (default: 'xy').duration: Animation duration in milliseconds (default: 0).limit: Boolean. If true, prevents scrolling beyond the boundaries of the element (default: true).offset: A number, object { top, left }, or a function function(elem, target) to adjust the scroll position.over: An object { top, left } representing a fraction of the target's dimension to scroll past (e.g., { top: 0.5 } scrolls to the middle of the target).margin: Boolean. If true, accounts for the target's margin and border width.queue: Boolean. If true and axis is 'xy', it performs the scroll in two steps (one axis then the other).onAfter: Function called when the animation completes.onAfterFirst: Function called after the first axis animation completes (used when queue: true).interrupt: (Via jQuery Tween) If true, stops the animation if the user manually scrolls during the animation.The .scrollTo() method is available on both the jQuery object (for scrolling specific elements) and the global $.scrollTo function (for scrolling the window). It allows for animated scrolling to a target element, a specific coordinate, or a maximum scroll position.
Target Types:
'100', '50px', '10%'): Scrolls to that specific coordinate.'max': Scrolls to the maximum possible scroll position.null: Does nothing.The $.scrollTo.max(elem, axis) method returns the maximum possible scrollable value for a given element and axis. This is useful for determining the boundaries of a scrollable container.
elem: The element or window to check.axis: 'x' or 'y'.