js返回顶部实例

来源：互联网发布：win10破解版office软件编辑：程序博客网时间：2024/05/18 06:42
<!doctype html><html><head><title>返回顶部</title><style type="text/css">body{height: 2000px;}#top{display: inline-block;width:24px;height: 26px;border: 1px solid #dfdfdf;background: #eee url(images/top.png) no-repeat -38px 5px;cursor: pointer;position: fixed;bottom: 1px;right: 100px;display: none;}#top:hover{background: #eee url(images/top.png) no-repeat -69px 4px;}</style><script type="text/javascript">//窗口滚动事件，控制返回按钮的可见性window.onload=function(){window.onscroll=function(){var top=document.getElementById('top');var scroll_height=getScrollTop();if(scroll_height>0){top.style.display='block';}else{top.style.display='none';}}}//点击返回按钮时促发的函数function goTop(){//添加定时器，没隔15毫秒调用var goTop=setInterval(scrollMove,15);           function scrollMove(){                    setScrollTop(getScrollTop()/1.2);                    if(getScrollTop()<1)clearInterval(goTop);//到达顶部时取消定时器                }}//返回滚动高度function getScrollTop(){               return document.documentElement.scrollTop || document.body.scrollTop;            }//设置滚动高度        function setScrollTop(value){                if(document.documentElement.scrollTop){                    document.documentElement.scrollTop=value;                }else{                    document.body.scrollTop=value;                }            }  </script></head><body><span id="top" title="回顶部" onclick="goTop()"></span><h2>滑动鼠标滚轮将在右下角出现返回顶部按钮</h2></body></html>