Javascript返回顶部插件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() {

                return function() {

                    window.event.cancelBubble = true; //停止时间冒泡

                    object.attachEvent = fn.apply(object);

                }

            })(object));

        } else if (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其他的再慢慢在调整争取把这个插件做好.....如果你有什么好的建议....欢迎在下面留言....谢谢支持您的网上邻居---忆夏天......