js返回顶部实例

最新推荐文章于 2019-08-11 16:09:13 发布

kankan231

最新推荐文章于 2019-08-11 16:09:13 发布

阅读量677

点赞数 1

本文链接：https://blog.csdn.net/kankan231/article/details/8753115

版权

<!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.οnlοad=function(){
				window.οnscrοll=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="回顶部" οnclick="goTop()"></span>
		<h2>滑动鼠标滚轮将在右下角出现返回顶部按钮</h2>
		
	</body>
</html>