回到页面顶部效果制作

最新推荐文章于 2024-06-01 20:33:36 发布

原创最新推荐文章于 2024-06-01 20:33:36 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的返回顶部功能实现方案，使用HTML、CSS和JavaScript，包括页面滚动监听、按钮显示隐藏逻辑及平滑滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.主要知识点：

DOM操作：1.document.getElementById // 根据id获取标签元素

2.document.documentElement.scrolTop //滚动条的数值，可以读写

事件运用：1.window.onload //页面加载完毕后触发

2.onclick //点击后触发

3.window.onscrol //滚动条滚动时触发

定时器：1.setInterval() //设置定时器，需要传入两个参数

2.clearInterval() //关闭定时器，需要传入两个参数

2.代码部分

html代码：

		<div class="return-top">
		
		</div>
		<a href="javascript:;" id="btn" title="return top"></a>

css代码：

	<style type="text/css">
		.return-top{
			height: 3000px;
			width: 1200px;
			margin: auto;
			background: burlywood;
			
		}
		#btn{
			
			width: 46px;
			height:46px;
			background:url(img/返回顶部-069.png) no-repeat left top ;			
			position: fixed;
			left: 95%;
			bottom: 30px;			
		}
		#btn:hover{
			background: url(img/返回顶部-069.png) no-repeat left -46.5px;
		}
	</style>

js代码：

/*回到页面顶部的js代码*/


//页面加载完毕后触发
window.onload=function(){
	var obtn=document.getElementById('btn');
	var timer=null;
	var isTop=true;
	var clientHeight=document.documentElement.clientHeight;//获取可视区的高度
	
	
	//滚动条滚动时触发，可停止其再向上滚动
	window.onscroll=function(){
		var osTop=document.documentElement.scrollTop || document.body.scrollTop;
		if(osTop>=clientHeight){
			obtn.style.display='block';
		}else{
			obtn.style.display='none'
		}
	
		
		if(!isTop){
			clearInterval(timer);
		}
		isTop=false;
	}
	
	obtn.onclick=function(){
		//设置定时器
		timer=setInterval(function(){
			var osTop=document.documentElement.scrollTop || document.body.scrollTop;			
			var ispeed=Math.floor(-osTop/6);//向前取整
			document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;
			
			isTop=true;
			if(osTop==0){
				clearInterval(timer);//当滚动条回到顶部时，清除定时器
			}
			
		},30);
		
		
		
	}
}

整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>回到顶部制作</title>
	</head>
	<script type="text/javascript" src="js/return-top.js" ></script>
	<style type="text/css">
		.return-top{
			height: 3000px;
			width: 1200px;
			margin: auto;
			background: burlywood;
			
		}
		#btn{
			
			width: 46px;
			height:46px;
			background:url(img/返回顶部-069.png) no-repeat left top ;			
			position: fixed;
			left: 95%;
			bottom: 30px;			
		}
		#btn:hover{
			background: url(img/返回顶部-069.png) no-repeat left -46.5px;
		}
	</style>
	<body>
		<div class="return-top">
			<img src="img/1.jpg"/>
		</div>
		<a href="javascript:;" id="btn" title="return top"></a>
	</body>
</html>

3.效果图：