jquery implementation navigation Scroll to the full instance of the specified content effect "with demo source download" _jquery

This example describes the jquery implementation navigation scrolling to the specified content effect. Share to everyone for your reference, specific as follows:

Do page production also has two years, which has done a lot of page effects, there are simple, but also complex, today to share a navigation scroll to the content of the special effects.

Usually we do the navigation scrolling to the content is done through the anchor point, brush a moment to jump directly to the content, there is no trace of scrolling effect, and URL links will eventually have "small tail", today I introduced a jquery to do the rolling effect, can set the scrolling speed, but also in the URL link on the "small tail."

Html:

<! DOCTYPE html>  

Jquery.scrollto.js:

Jquery.getpos = function (e) {var L = 0;
  var t = 0;
  var w = jquery.intval (Jquery.css (E, ' width '));
  var h = jquery.intval (Jquery.css (E, ' height '));
  var wb = E.offsetwidth;
  var HB = E.offsetheight;
    while (e.offsetparent) {L + + E.offsetleft + (E.currentstyle?jquery.intval (e.currentstyle.borderleftwidth): 0);
    T + + E.offsettop + (E.currentstyle?jquery.intval (e.currentstyle.bordertopwidth): 0);
  e = e.offsetparent;
  L + + E.offsetleft + (E.currentstyle?jquery.intval (e.currentstyle.borderleftwidth): 0);
  T + + E.offsettop + (E.currentstyle?jquery.intval (e.currentstyle.bordertopwidth): 0);
return {x:l, y:t, W:w, H:h, WB:WB, HB:HB};
};
    Jquery.getclient = function (e) {if (e) {w = e.clientwidth;
  h = e.clientheight; } else {w = (window.innerwidth)? Window.innerwidth: (Document.documentelement && document.documentelement.c lientwidth)?
    Document.documentElement.clientWidth:document.body.offsetWidth; h = (window.innerheight)? Window.innerHeight: (document.documentelement && document.documentElement.clientHeight)?
  Document.documentElement.clientHeight:document.body.offsetHeight;
} return {w:w,h:h};
};
    Jquery.getscroll = function (e) {if (e) {t = e.scrolltop;
    L = e.scrollleft;
    W = e.scrollwidth;
  h = e.scrollheight; } else {if (document.documentelement && document.documentElement.scrollTop) {t = Document.documentelem
      Ent.scrolltop;
      L = document.documentElement.scrollLeft;
      W = document.documentElement.scrollWidth;
    h = document.documentElement.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};
};
  Jquery.intval = function (v) {v = parseint (v); return isNaN (v)?
0:v;
};
  JQuery.fn.ScrollTo = function (s) {o = Jquery.speed (s);
  Return This.each (function () {  New JQuery.fx.ScrollTo (this, O);
});
};
  JQuery.fx.ScrollTo = function (e, o) {var z = this;
  Z.O = O;
  Z.E = e;
  Z.P = Jquery.getpos (e);
  Z.S = Jquery.getscroll ();
  Z.clear = function () {clearinterval (Z.timer); z.timer=null};
  z.t= (New Date). GetTime ();
    Z.step = function () {var t = (new Date). GetTime ();
    var p = (t-z.t)/z.o.duration;
      if (t >= z.o.duration+z.t) {z.clear ();
    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=setinterval (function () {z.step ();},13);

 };

Call Method:

$ (ID). Scrollto (speed);
ID is jump to content id;speed is the scrolling speed, the greater the value, the slower the scrolling

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site topics: "jquery window Operation tips Summary", "jquery drag and drop effects and tips summary", "jquery common Plug-ins and Usage summary", "jquery Ajax Usage Summary", "jquery Table" ( Table) Summary of operations tips, jquery Extended techniques Summary, jquery Common Classic effects summary, jquery animation and special effects usage summary and jquery selector Usage Summary

I hope this article will help you with the jquery program design.