Javascript 实现锚点(Anchor)间平滑跳转

  1 (function($){
  2     $.fn.scroller = function(options){
  3         var defaultVal = {
  4             duration:500
  5         };
  6         var obj = $.extend({},defaultVal,options);
  7         var el = options.el;
  8         var duration = options.duration;
  9         return this.each(function(){
 10             if(typeof el != 'object') { 
 11                 el = document.getElementById(el); 
 12             }
 13             if(!el) return;
 14             var z = this;
 15             z.el = el;
 16             z.p = getPos(el);
 17             z.s = getScroll();
 18             z.clear = function(){
 19                 window.clearInterval(z.timer);z.timer=null
 20             };
 21             z.t=(new Date).getTime();
 22             z.step = function(){
 23                 var t = (new Date).getTime();
 24                 var p = (t - z.t) / duration;
 25                 if (t >= duration + z.t) {
 26                     z.clear();
 27                     window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
 28                 } else {
 29                 st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
 30                 sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
 31                 z.scroll(st, sl);
 32                 }
 33             };
 34             z.scroll = function (t, l){
 35                 window.scrollTo(l, t)
 36             };
 37             z.timer = window.setInterval(function(){z.step();},13);
 38             });
 39     };
 40     
 41     function intval(v)
 42     {
 43         v = parseInt(v);
 44         return isNaN(v) ? 0 : v;
 45     }
 46     
 47     // 获取元素信息
 48     function getPos(e)
 49     {
 50         var l = 0;
 51         var t  = 0;
 52         var w = intval(e.style.width);
 53         var h = intval(e.style.height);
 54         var wb = e.offsetWidth;
 55         var hb = e.offsetHeight;
 56         while (e.offsetParent){
 57             l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
 58             t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
 59             e = e.offsetParent;
 60         }
 61         l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
 62         t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
 63         return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
 64     }
 65     // 获取滚动条信息
 66     function getScroll()
 67     {
 68         var t, l, w, h;
 69         if (document.documentElement && document.documentElement.scrollTop) {
 70             t = document.documentElement.scrollTop;
 71             l = document.documentElement.scrollLeft;
 72             w = document.documentElement.scrollWidth;
 73             h = document.documentElement.scrollHeight;
 74         } else if (document.body) {
 75             t = document.body.scrollTop;
 76             l = document.body.scrollLeft;
 77             w = document.body.scrollWidth;
 78             h = document.body.scrollHeight;
 79         }
 80         return { t: t, l: l, w: w, h: h };
 81     }
116 })(jQuery)
117 
118 $(function(){
119     $('#goto').click(function(){
120         $(this).scroller(
121             {
122                 el:'t1',
123                 duration:1000
124             }
125         );
126     });
127 })