• 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 })
    
    
    
     
  • 相关阅读:
    SpringCloudAlibaba项目之生产者与消费者
    SpringCloudAlibaba项目之Nacos搭建及服务注册
    SpringCloudAlibaba项目之SkyWalking链路追踪
    轻松搭建SpringCloudAlibaba分布式微服务
    SpringCloudAlibaba项目之OpenFeign远程调用
    SpringCloudAlibaba项目之GateWay网关
    SpringCloudAlibaba项目之Sentinel流量控制
    SpringCloudAlibaba项目之Seata分布式事务
    SpringCloudAlibaba项目之Nacosconfig配置中心
    2021年Graph ML热门趋势和主要进展总结
  • 原文地址:https://www.cnblogs.com/zfdai/p/3363466.html
Copyright © 2020-2023  润新知