JQuery smoothly scrolls the page to an anchor program

Yesterday, A friend asked me if jquery could achieve clicking A title and then smoothly scrolling the page to A certain anchor. I don't think this is the function to return to the top, but it is A little different from the function to return to the top, next I will introduce it to you.

Back to Top

The Code is as follows:	Copy code
$ (Function (){ $ (Window). scroll (function (){ If ($ (window). scrollTop ()> = 100 ){ $ ('# Go-top'). fadeIn (300 ); } Else { $ ('# Go-top'). fadeOut (300 ); } }); $ ('# Go-top'). click (function (){ $ ('Html, body'). animate ({ ScrollTop: '0px' }, 0 ); }); }); Html code <A href = "javascript: void (0);" class = "go-top" style = "text-decoration: none; display: block; "id =" go-top "> </a>

It seems that only the top node can be returned, but not the specified anchor. Find a js solution.

Javascript:

The Code is as follows:

Copy code

<SCRIPT type = text/javascript> // Note: use Javascript to achieve smooth jump between Anchor // Source: ThickBox 2.1 // Sorting: Yanfu Xie [xieyanfu@yahoo.com.cn] // URL: http://www.bKjia. c0m // Date: 07.01.17 // Convert to a number Function intval (v) { V = parseInt (v ); Return isNaN (v )? 0: v; } // Obtain Element Information Function getPos (e) { Var l = 0; Var t = 0; Var w = intval (e. style. width ); Var h = intval (e. style. height ); Var wb = e. offsetWidth; Var hb = e. offsetHeight; While (e. offsetParent ){ L + = e. offsetLeft + (e. currentStyle? Intval (e. currentStyle. borderLeftWidth): 0 ); T + = e. offsetTop + (e. currentStyle? Intval (e. currentStyle. borderTopWidth): 0 ); E = e. offsetParent; } L + = e. offsetLeft + (e. currentStyle? Intval (e. currentStyle. borderLeftWidth): 0 ); T + = e. offsetTop + (e. currentStyle? Intval (e. currentStyle. borderTopWidth): 0 ); Return {x: l, y: t, w: w, h: h, wb: wb, hb: hb }; } // Obtain the scroll bar Information Function getScroll () { Var t, l, w, h; If (document.doc umentElement & document.doc umentElement. scrollTop ){ T = document.doc umentElement. scrollTop; L = document.doc umentElement. scrollLeft; W = document.doc umentElement. scrollWidth; H = document.doc umentElement. scrollHeight; } Else if (document. body ){ T = document. body. scrollTop; L = document. body. scrollLeft; W = document. body. scrollWidth; H = document. body. scrollHeight; } Return {t: t, l: l, w: w, h: h }; } // Smooth jump between Anchor Function scroller (el, duration) { If (typeof el! = 'Object') {el = document. getElementById (el );} If (! El) return; Var z = this; Z. el = el; Z. p = getPos (el ); Z. s = getScroll (); Z. clear = function () {window. clearInterval (z. timer); z. timer = null }; Z. t = (new Date). getTime (); Z. step = function (){ Var t = (new Date). getTime (); Var p = (t-z. t)/duration; If (t> = duration + z. t ){ Z. clear (); Window. setTimeout (function () {z. scroll (z. p. y, z. p. x)}, 13 ); } Else { St = (-Math. cos (p * Math. PI)/2) + 0.5) * (z. p. y-z.s.t) + z. s. t; Sl = (-Math. cos (p * Math. PI)/2) + 0.5) * (z. p. x-z.s.l) + z. s. l; Z. scroll (st, sl ); } }; Z. scroll = function (t, l) {window. scrollTo (l, t )}; Z. timer = window. setInterval (function () {z. step () ;}, 13 ); } </SCRIPT> <STYLE type = text/css> Div. test { Width: 400px; Margin: 5px auto; Border: 1px solid # ccc; } Div. test strong { Font-size: 16px; Background: # fff; Border-bottom: 1px solid # aaa; Margin: 0; Display: block; Padding: 5px 0; Text-decoration: underline; Color: # 059B9A; Cursor: pointer; } Div. test p { Height: 400px; Background: # f1f1f1; Margin: 0; } </STYLE>

Call method:

Scroller (el, duration)

El: Target anchor ID
Duration: duration, in milliseconds. The smaller the value, the faster

Well, it's easy to use, but it seems that the code is too long. Search for a jquery ultra-simple page to scroll to an anchor code.

The Code is as follows:	Copy code
$ (Document). ready (function (){ $ ("A. topLink"). click (function (){ $ ("Html, body"). animate ({ ScrollTop: $ (this). attr ("href"). offset (). top + "px" },{ Duration: 500, Easing: "swing" }); Return false; }); });