返回顶部,js,css,页面离开顶部一定距离后出现返回顶部,点击后滚动回顶部,支持IE,FF,chrome ,safari,opera[摘自布布分享,tech.bubufx.com]
Posted on 2013-04-24 10:20 weekzero 阅读(130) 评论(0) 编辑 收藏 举报支持所有浏览器,返回顶部代码,js实现,css辅助,页面离开顶部一定距离后出现返回顶部按钮或图片,点击返回顶部后滚动效果返回顶部。支持支持IE,FF,chrome ,safari,opera等浏览器。
全部代码如下,将如下代码存为htm文件,运行看效果,同文件夹下放返回顶部图片“bubufx_top.jpg”
<! 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 > < title >布布分享</ title > < style type="text/css"> #goTopImg { position: fixed; text-align: center; line-height: 30px; width: 30px; bottom: 60px; /*离底部的距离*/ height: 33px; font-size: 12px; cursor: pointer; right: 80px; /*偏离右侧的距离*/ _position: absolute; _right: auto; } </ style > < script type="text/javascript"> function goTopFun() { var bubufx_scrollheight = 600; //页面离开顶部的距离,超过该距离才出现返回顶部图片 var obj = document.getElementById("goTopImg"); function getScrollTop() { return document.documentElement.scrollTop + document.body.scrollTop; //解决多浏览器支持,chrome等浏览器下document.documentElement.scrollTop的值是0 } function setScrollTop(value) { //解决多浏览器支持 if (document.documentElement.scrollTop == 0) { document.body.scrollTop = value; } else { document.documentElement.scrollTop = value; } } window.onscroll = function () { getScrollTop() > bubufx_scrollheight ? obj.style.display = "" : obj.style.display = "none"; } obj.onclick = function () { var goTop = setInterval(scrollMove, 10); function scrollMove() { setScrollTop(getScrollTop() / 1.1); if (getScrollTop() < 1 ) clearInterval(goTop); } } } </script> </ head > < body > < div style="height: 6000px; text-align: center;"> 布布分享提示您,测试页面,让页面变的更高高 </ div > < script type="text/javascript"> var bubufx_goTopImg = "bubufx_top.jpg"; document.write("< div style="display: none" id="goTopImg">< img border="0" src="" + bubufx_goTopImg + ""></ div >"); goTopFun(); </ script > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步