jQuery定位跳转插件（jquery.scrollto.js）

最新推荐文章于 2024-08-09 07:07:16 发布

weixin_34159110

最新推荐文章于 2024-08-09 07:07:16 发布

阅读量114

点赞数

文章标签： javascript ViewUI

代码

< html >
< head >
< title ></ title >

< script src ="js/wjb/lib/jquery-1.3.2.min.js" type ="text/javascript" ></ script >
< script src ="js/wjb/ext/jquery.scrollto.js" type ="text/javascript" ></ script >
< script type ="text/javascript" language ="javascript" >
 function goto(id) {
 $( " # " + id).ScrollTo( 800 );
 }
</ script >
</ head >
< body >
 
< a id ="haha" style ="color:Red;cursor:pointer;" onclick ="javascript:goto('hehe');return false;" > 我跳↓ </ a >
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
< div id ="hehe" style ="color:Red;cursor:pointer;" onclick ="javascript:goto('haha');return false;" > 我再跳↑ </ div >
</ body >
</ 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.clientWidth) ? 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.documentElement.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 );
};

插件下载：

jquery.scrollto.rar