bower install jquery.scrollTo
npm install jquery.scrollto
php composer.phar require --prefer-dist flesler/jquery.scrollto "*"
< script src =" https://cdn.jsdelivr.net/npm/jquery.scrollto @2.1.3/jquery.scrollTo.min.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js " > </ script >
$ ( element ) . scrollTo ( target [ , duration ] [ , settings ] ) ;
-
A number with a fixed position: two hundred and fifty -
A string with a fixed position with px: "250px" -
A string with a percentage (of container's size): "50%" -
A string with a relative step: "+=50px" -
An object with left and top containining any of the aforementioned: {left:250, top:"50px"} -
The string "max" to scroll to the end. -
A string selector that will be relative to the element to scroll: ".section:eq(2)" -
A DOM element, probably a child of the element to scroll: document.getElementById("top") -
A jQuery object with a DOM element: $("#top")
-
axis : The axes to animate: xy (default), x , y , yx -
interrupt : If true will cancel the animation if the user scrolls. Default is false -
limit : If true the plugin will not scroll beyond the container's size. Default is true -
margin : If true , subtracts the margin and border of the target element. Default is false -
offset : Added to the final position, can be a number or an object with left and top -
over : Adds a % of the target dimensions: {left:0.5, top:0.5} -
queue : If true will scroll one axis and then the other. Default is false -
onAfter(target, settings) : A callback triggered when the animation ends (jQuery's complete() ) -
onAfterFirst(target, settings) : A callback triggered after the first axis scrolls when queueing
-
duration : Duration of the animation, default is zero which makes it instantaneous -
easing : Name of an easing equation, you must register the easing function: swing -
fail() : A callback triggered when the animation is stopped (f.e via interrupt ) -
step() : A callback triggered for every animated property on every frame -
progress() : A callback triggered on every frame -
And more, check jQuery's documentation
$ . extend ( $ . scrollTo . defaults , {
axis : 'y' ,
duration : eight hundred
} ) ;
$ . scrollTo ( one hundred , {
onAfter : function ( ) {
requestAnimationFrame ( function ( ) {
$ ( ".result" ) . addClass ( "selected" ) ;
} ) ;
}
} ) ;
-
Cannot read property 'propHooks' of undefined : You are most likely using the slim version jQuery, which doesn't include the effects module. The plugin cannot function without it and you'll need the full version. -
The element doesn't scroll : A good approach to debug is to set overflow: auto temporarily to the scrollable element, to make sure it would be manually scrollable. If you don't see any scrollbar, the problem is likely in the HTML/CSS.