Click the event and the page jumps to the location of the specified DOM element

Sets a function that performs a function scroll bar auto-drag, and the page jumps to the location of the specified DOM element.

The implementation is simple, first introduce the Animatescroll.js file (to introduce jquery first), and then

$ (' #id '). Animatescroll ();

You can adjust the location of the page to the specified DOM element.

For convenience you can write a function that passes in the ID of the DOM element

function Jumpto (ID) {    $ ("#" +ID). Animatescroll ();

Attached Animatescroll.js

/*method of Use: $ ("#id"). Animatescroll (); can be transferred to the location of the specified DOM on the page*/(function($) {$.fn.animatescroll=function(options) {//Fetches Options        varopts =$.extend ({},$.fn.animatescroll.defaults,options); //Get the distance of particular ID or class from top        varoffset = This. Offset (). Top; //defines various easing effectsjquery.easing[' jswing ' = jquery.easing[' Swing ']; Jquery.extend (jquery.easing, {def:' Easeoutquad ', Swing:function(x, T, B, C, d) {returnJquery.easing[jquery.easing.def] (x, T, B, C, D); }, Easeinquad:function(x, T, B, C, d) {returnc* (T/=d) *t + b;}, Easeoutquad:function(x, T, B, C, d) {return-c * (t/=d) * (t-2) + B;}, Easeinoutquad:function(x, T, B, C, d) {if((T/=D/2) < 1)returnC/2*t*t + b;return-C/2 * ((--T) * (t-2)-1) + B;}, Easeincubic:function(x, T, B, C, d) {returnc* (T/=d) *t*t + b;}, Easeoutcubic:function(x, T, B, C, d) {returnc* ((t=t/d-1) *t*t + 1) + B;}, Easeinoutcubic:function(x, T, B, C, d) {if((T/=D/2) < 1)returnC/2*t*t*t + b;returnC/2* ((t-=2) *t*t + 2) + B;}, Easeinquart:function(x, T, B, C, d) {returnc* (T/=d) *t*t*t + b;}, Easeoutquart:function(x, T, B, C, d) {return-C * ((t=t/d-1) *t*t*t-1) + B;}, Easeinoutquart:function(x, T, B, C, d) {if((T/=D/2) < 1)returnC/2*t*t*t*t + b;return-C/2 * ((t-=2) *t*t*t-2) + B;}, Easeinquint:function(x, T, B, C, d) {returnc* (T/=d) *t*t*t*t + b;}, Easeoutquint:function(x, T, B, C, d) {returnc* ((t=t/d-1) *t*t*t*t + 1) + B;}, Easeinoutquint:function(x, T, B, C, d) {if((T/=D/2) < 1)returnC/2*t*t*t*t*t + b;returnC/2* ((t-=2) *t*t*t*t + 2) + B;}, Easeinsine:function(x, T, B, C, d) {return-c * Math.Cos (T/D * (MATH.PI/2)) + C +b; }, Easeoutsine:function(x, T, B, C, d) {returnc * Math.sin (T/D * (MATH.PI/2)) +b; }, Easeinoutsine:function(x, T, B, C, d) {return-C/2 * (Math.Cos (MATH.PI*T/D)-1) +b; }, Easeinexpo:function(x, T, B, C, d) {return(t==0)? B:C * MATH.POW (2, Ten * (T/D-1)) + B;}, Easeoutexpo:function(x, T, B, C, d) {return(T==d)? B+C:C * (-math.pow (2, -10 * t/d) + 1) + B;}, Easeinoutexpo:function(x, T, B, C, d) {if(t==0)returnb; if(T==d)returnB +C; if((T/=D/2) < 1)returnC/2 * MATH.POW (2, Ten * (t-1)) + B;returnC/2 * (-math.pow (2, -10 *--t) + 2) + B;}, Easeincirc:function(x, T, B, C, d) {return-C * (MATH.SQRT (1-(T/=d) *t)-1) + B;}, Easeoutcirc:function(x, T, B, C, d) {returnc * MATH.SQRT (1-(t=t/d-1) *t) + B;}, Easeinoutcirc:function(x, T, B, C, d) {if((T/=D/2) < 1)return-C/2 * (MATH.SQRT (1-t*t)-1) + B;returnC/2 * (MATH.SQRT (1-(t-=2) *t) + 1) + B;}, Easeinelastic:function(x, T, B, C, d) {vars=1.70158;varP=0;varA=C; if(t==0)returnbif((T/=d) ==1) return b+c; if (!p) p=d*.3;if(A < Math.Abs (c)) {a=c;varS=P/4; }Else vars = p/(2*math.pi) * Math.asin (c/a); return-(A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + B;}, Easeoutelastic:function(x, T, B, C, d) {vars=1.70158;varP=0;varA=C; if(t==0)returnbif((T/=d) ==1) return b+c; if (!p) p=d*.3;if(A < Math.Abs (c)) {a=c;varS=P/4; }Else vars = p/(2*math.pi) * Math.asin (c/a); returnA*math.pow (2,-10*t) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + C + B;}, Easeinoutelastic:function(x, T, B, C, d) {vars=1.70158;varP=0;varA=C; if(t==0)returnbif((T/=D/2) ==2)returnB+c;if(!p) p=d* (. 3*1.5); if(A < Math.Abs (c)) {a=c;varS=P/4; }Else vars = p/(2*math.pi) * Math.asin (c/a); if(T < 1)return-.5* (A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + B;returnA*math.pow (2,-10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p) *.5 + C + B;}, Easeinback:function(x, T, B, C, D, s) {if(s = = undefined) s = 1.70158; returnc* (T/=d) *t* ((s+1) *t-s) + B;}, Easeoutback:function(x, T, B, C, D, s) {if(s = = undefined) s = 1.70158; returnc* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + B;}, Easeinoutback:function(x, T, B, C, D, s) {if(s = = undefined) s = 1.70158; if((T/=D/2) < 1)returnC/2* (t*t* (((s*= (1.525) +1) *t-s) + B;returnC/2* ((t-=2) *t* (((s*= (1.525)) +1) *t + s) + 2) + B;}, Easeinbounce:function(x, T, B, C, d) {returnC-jquery.easing.easeoutbounce (x, d-t, 0, C, D) +b; }, Easeoutbounce:function(x, T, B, C, d) {if((T/=d) < (1/2.75)) {                                returnc* (7.5625*t*t) +b; } Else if(T < (2/2.75)) {returnc* (7.5625* (t-= (1.5/2.75)) *t +.) + B; }Else if(T < (2.5/2.75)) {returnc* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b; }Else {                                returnc* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b;}}, Easeinoutbounce:function(x, T, B, C, d) {if(T < D/2) return jQuery.easing.easeInBounce (x, t*2, 0, C, D) *. 5 + b;returnJQuery.easing.easeOutBounce (x, t*2-d, 0, C, D) *. 5 + c*.5 +b;        }        }); //Scroll the page to the desired position$ ("HTML, Body"). Animate ({scrolltop:offset-opts.padding}, Opts.scrollspeed, opts.easing);    }; //Default Options$.fn.animatescroll.defaults ={easing:"Swing", Scrollspeed:800, padding:0    };} (JQuery));

Click the event and the page jumps to the location of the specified DOM element