仿淘宝回到顶部代码浏览代码脚本代码 IT人家-为IT人民服务！

联系我们 | 收藏 | 注册 | 登录

脚本代码网络精品、绝对收藏!

电子杂志企业建站

QQ表情大全　电子杂志制作　 2010圣诞素材　 2010虎年素材　收录站集合　站长工具　站长导航　精品购物　新年素材　电子地图　

脚本代码 - Javascript/dom - 浏览代码 - 仿淘宝回到顶部代码

仿淘宝回到顶部代码

http://www.webkey.cn/ 2010-2-4 22:04:33 IT人家整理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿淘宝回到顶部代码</title>  <style type="text/css"> body{ font:12px Verdana, Geneva, sans-serif; line-height:1.2; text-align:center; margin:0px; } #gotopbtn { width:100px; height:30px; background:#fff; position:fixed; bottom:100px; right:20px; display:none; cursor:pointer; font-size:14px; line-height:30px; border:1px solid #aaa; } .main{ width:100%; background:#ccc; margin:0 auto; } </style> </head> <body> <div class="main"> <img src="/webkey.png" width="1004" height="2408"><br> </div> <div id="gotopbtn">返回顶部</div> <script type="text/javascript"> backTop=function (btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; window.onscroll=set; btn.onclick=function (){ btn.style.display="none"; window.onscroll=null; this.timer=setInterval(function(){ d.scrollTop-=Math.ceil(d.scrollTop*0.1); if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=d.scrollTop?'block':"none"} }; backTop('gotopbtn'); </script> </body> </html>

以下为另一版本仿淘宝jquery插件演示文件下载地址

http://www.webkey.cn/demo/view.asp?id=377

所属分类: Javascript/dom 所属专题:

共有 1530 人次浏览收藏本页返回上一页责任编辑: atom