支持所有浏览器,返回顶部代码,js实现,css辅助,页面离开顶部一定距离后出现返回顶部按钮或图片,点击返回顶部后滚动效果返回顶部。支持支持IE,FF,chrome ,safari,opera等浏览器。
全部代码如下,将如下代码存为htm文件,运行看效果,同文件夹下放返回顶部图片“bubuko_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>bubuko.com</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 bubuko_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() > bubuko_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;"> bubuko提示您,测试页面,让页面变的更高高 </div> <script type="text/javascript"> var bubuko_goTopImg = "bubuko_top.jpg"; document.write("<div style="display: none" id="goTopImg"><img border="0" src="" + bubuko_goTopImg + ""></div>"); goTopFun(); </script> </body> </html>
返回顶部,js,css,页面离开顶部一定距离后出现返回顶部,点击后滚动回顶部,支持IE,FF,chrome ,safari,opera