JavaScript 跳转到指定元素位置的简单示例

前端之家收集整理的这篇文章主要介绍了JavaScript 跳转到指定元素位置的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
JS代码如下:
  1. /**
  2. * 跳转到指定元素位置
  3. * @param
  4. * @arrange (512.笔记) jb51.cc
  5. * 使用方法
  6. * scroller(el,duration)
  7. * el : 目标锚点 ID
  8. * duration : 持续时间,以毫秒为单位,越小越快
  9. */
  10. var flutil = {
  11. intval: function(v) {
  12.     v = parseInt(v);
  13.     return isNaN(v) ? 0 : v;
  14. },getPos: function(e) { // 获取元素信息 
  15.     var l = 0;
  16.     var t = 0;
  17.     var w = this.intval(e.style.width);
  18.     var h = this.intval(e.style.height);
  19.     var wb = e.offsetWidth;
  20.     var hb = e.offsetHeight;
  21.     while (e.offsetParent) {
  22.         l += e.offsetLeft + (e.currentStyle ? this.intval(e.currentStyle.borderLeftWidth) : 0);
  23.         t += e.offsetTop + (e.currentStyle ? this.intval(e.currentStyle.borderTopWidth) : 0);
  24.         e = e.offsetParent;
  25.     }
  26.     l += e.offsetLeft + (e.currentStyle ? this.intval(e.currentStyle.borderLeftWidth) : 0);
  27.     t += e.offsetTop + (e.currentStyle ? this.intval(e.currentStyle.borderTopWidth) : 0);
  28.     return {
  29.         x: l,        y: t,        w: w,        h: h,        wb: wb,        hb: hb
  30.     };
  31. },getScroll: function() { // 获取滚动条信息 
  32.     var t,l,w,h;
  33.     if (document.documentElement && document.documentElement.scrollTop) {
  34.         t = document.documentElement.scrollTop;
  35.         l = document.documentElement.scrollLeft;
  36.         w = document.documentElement.scrollWidth;
  37.         h = document.documentElement.scrollHeight;
  38.     } else if (document.body) {
  39.         t = document.body.scrollTop;
  40.         l = document.body.scrollLeft;
  41.         w = document.body.scrollWidth;
  42.         h = document.body.scrollHeight;
  43.     }
  44.     return {
  45.         t: t,        l: l,        h: h
  46.     };
  47. },scroller: function(el,duration) { // 锚点(Anchor)间平滑跳转 
  48.     if (typeof el != 'object') {
  49.         el = document.getElementById(el);
  50.     }
  51.     if (!el) return;
  52.     var z = this;
  53.     z.el = el;
  54.     z.p = this.getPos(el);
  55.     z.s = this.getScroll();
  56.     z.clear = function() {
  57.         window.clearInterval(z.timer);
  58.         z.timer = null
  59.     };
  60.     z.t = (new Date).getTime();
  61.     z.step = function() {
  62.         var t = (new Date).getTime();
  63.         var p = (t - z.t) / duration;
  64.         if (t >= duration + z.t) {
  65.             z.clear();
  66.             window.setTimeout(function() {
  67.                 z.scroll(z.p.y,z.p.x)
  68.             },13);
  69.         } else {
  70.             st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
  71.             sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
  72.             z.scroll(st,sl);
  73.         }
  74.     };
  75.     z.scroll = function(t,l) {
  76.         window.scrollTo(l,t)
  77.     };
  78.     z.timer = window.setInterval(function() {
  79.         z.step();
  80.     },13);
  81. }
  82. }
  83. // 来自:编程之家 jb51.cc(jb51.cc)

猜你在找的JavaScript相关文章