一个简短的返回顶部插件js top

昨天在网上闲逛的时候,发现很多人有返回顶部的功能,确实也很实用于是本着学习的态度自己写了一个返回顶部的插件

效果见忆夏天,向下拖动滚动条一段距离后右下角就会显示出来了...(ps:我用的默认,使用文字显示,因为没有找到好的top图片)

喜欢的朋友可以从这里下载:猛点我

下面说说使用方法:

1.默认:以纯文字  "↑顶部"  显示

var mytop = new xttop();

2.调用图片:

var mytop =new xttop({img:图片路径});

比如我要调用一张外联图片

var mytop =new xttop({img:"http://www.exiatian.com/top.png"});

当然更具你的图片大小你得设置下mytop的宽高

var mytop =new xttop({img:"http://www.exiatian.com/top.png",height:"你图片的高","图片宽"});

3.其他参数选择:

我默认设置bottom值和right值是 10px,就是在右下角坐标显示的位置.可以根据自己的喜好改变值大小

速度speed默认值是35,可根据你的喜欢适当调整建议不要超过100,不然就没有滑动的效果了....一下就飞上去了....当然如果你一定要飞上去.....那我也没有办法....

var mytop =new xttop({img:"http://www.exiatian.com/top.png",height:"你图片的高","图片宽",bottom:"50px",right:"50px",speed:50});

xttop.js源代码:

(function(docu) {
    var objxttop =null; //topdiv对象
var xttop =function(topjason) {
        var doc = document,
        docbody = doc.body,
        goto_top_type =-1, //记录浏览器类型
        goto_top_itv =0,
        isNotIE =-[ -1 , ]; //全世界最短的判断IE浏览器,非IE浏览器为1,IE为NAN
        config = topjason || {};
        var topdiv = doc.createElement("div");
        topdiv.id = config["id"] ||"xttop"; //topdiv设置ID,默认为xttop,为避免冲突,请自设
//topdiv样式
        topdiv.style.cssText ="position:fixed;bottom:"+ (config["bottom"] ||"10px") +";right:"+ (config["right"] ||"10px") +";display:none;"+ (config["width"] ||"40px") +";height:"+ (config["height"] ||"19px") +";";
        if (config["img"]) {
            topdiv.style.background ="url("+ (config["img"] =="defaults"?"http://www.exiatian.com/wp-content/themes/thunder/images/top.png": config["img"]) +") no-repeat"; //加上背景图片
        } else {
            topdiv.innerHTML ="<span style='color:#7B8693;font-size:12px;border:1px solid #7B8693;'>↑顶部</span>"; //默认以文字展示
        }
        function goto_top_timer() {
            var y = docbody.scrollTop|| doc.documentElement.scrollTop;
            var moveby = config["speed"] ||35;

            y -= Math.ceil(y * moveby /100); //匀减速
if (y <0) {
                y =0;
            }

            if ( docbody.scrollTop ) {
                    docbody.scrollTop = y;
            } else {
                doc.documentElement.scrollTop = y;
            }

            if (y ==0) {
                clearInterval(goto_top_itv);
                goto_top_itv =0;
            }
        }
        function goto_top() {
            if (goto_top_itv ==0) {
                goto_top_itv = setInterval(goto_top_timer, 50);
            }
        }
        bind(topdiv, "click", goto_top);
        docbody.appendChild(topdiv);
    }

    var bind =function(object, type, fn) {
        if (object.attachEvent) { //IE浏览器
            object.attachEvent("on"+ type, (function() {
                returnfunction() {
                    window.event.cancelBubble =true; //停止时间冒泡
                    object.attachEvent = fn.apply(object);
                }
            })(object));
        } elseif (object.addEventListener) { //其他浏览器
            object.addEventListener(type,
            function(event) {
                event.stopPropagation(); //停止时间冒泡
                fn.apply(this)
            },
            false);
        }
    }
    var scrollevent =function() {
        objxttop = objxttop || document.getElementById("xttop");
        if (document.documentElement.scrollTop >120|| document.body.scrollTop >120) //当IE或其他浏览器滚动条值大于120时,top显示出来
        {
            objxttop.style.display ="block";
        } else//小于120时,top隐藏
        {
            objxttop.style.display ="none";
        }
    }
    window.xttop = xttop;
    window.onscroll = scrollevent; //绑定滚动条事件
})();

　　

好了介绍就到这里,已测兼容IE,FF,Chrome其他的再慢慢在调整争取把这个插件做好.....如果你有什么好的建议....欢迎在下面留言....谢谢支持您的网上邻居---忆夏天......