动态 版块 发帖 消息 我的
Loading...
发帖须知:尊敬的坛友您好!请遵守规则在相应的版块发帖,违规者扣除相应的积分和金币。
guest
登录之后更精彩~
小鱼aLv0 
原生JS实现网站返回顶部代码     
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>返回顶部练习</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 2000px;
			width: 100%;
		}
		.to_top{
			width: 60px;
			height: 60px;
			position: fixed;
			bottom: 20%;
			right: 20px;
			font-size: 40px;
			line-height: 70px;
			border: none;
			background: rgba(0,0,0,0.2);
			cursor: pointer;
			opacity: 0;
			/*display: none;*/
			transition: all 1s;
		}
		.to_top:hover{
			background: rgba(0,0,0,0.4);
			color: white;
		}
	</style>
</head>
<body>
	<button class="to_top">^</button>
	<script type="text/javascript">
		window.onload =function(){
			var timer = null;//时间标识符
			var isTop = true;
			
			var obtn = document.getElementsByClassName('to_top')[0];
		    obtn.onclick = function(){
		    	// 设置定时器
		    	timer = setInterval(function(){
		    		var osTop = document.documentElement.scrollTop || document.body.scrollTop;
		    		//减小的速度
                    var isSpeed = Math.floor(-osTop/6);
		        	document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed; 
		        	//判断,然后清除定时器
	                if (osTop == 0) {
	                    clearInterval(timer);
	                } 
	                isTop = true;//添加在obtn.onclick事件的timer中    
		    	},30);                          
		    };
		    //获取页面的可视窗口高度
            var client_height = document.documentElement.clientHeight || document.body.clientHeight;
		    //滚动条滚动时触发             
			window.onscroll = function(){ 
				//在滚动的时候增加判断,忘了的话很容易出错
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (osTop >= client_height) {
				    obtn.style.opacity = '1';
				}else{
				    obtn.style.opacity = '0';
				}         
			    if(!isTop){
			        clearInterval(timer);
			    }
			    isTop = false;
			};
		}
	</script>
 
<!-- 	DOM:
	    1、document.getElementById()
	    2、document.documentElement.scrollTop
	    3、document.body.scrollTop
	事件:
	    1、window.onload
	    2、window.onscroll
	    3、obtn.onclick
	定时器的使用:
	    1、setInterval(function(){},30)
	    2、clearInterval(timer) -->
	    
</body>
</html>

联系我时,请说是在 yanghaohui.cn技术论坛 上看到的,谢谢!

 0  已被阅读了6次  楼主 2020-10-27 20:18:22
回复列表

回复评论可以增加积分和金币哦!

拖动滑块验证
»
退出登录
Powered by 技术论坛 7.3.9
© 2015-2020 技术论坛
您的IP:3.238.190.82,2020-11-27 23:05:40,Processed in 0.06382 second(s).
Powered by 技术论坛
发帖须知:尊敬的坛友您好!请遵守规则在相应的版块发帖,违规者扣除相应的积分和金币。