昨天在网上闲逛的时候,发现很多人有返回顶部的功能,确实也很实用于是本着学习的态度自己写了一个返回顶部的插件
效果见忆夏天,向下拖动滚动条一段距离后右下角就会显示出来了...(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其他的再慢慢在调整争取把这个插件做好.....如果你有什么好的建议....欢迎在下面留言....谢谢支持您的网上邻居---忆夏天......