使用js和css3实现回到顶部效果和头部栏缩放效果

sorryhc

已于 2022-06-29 07:13:09 修改

阅读量711

点赞数 4

分类专栏： JS 文章标签： javascript css css3 html html5

于 2020-07-07 16:19:41 首次发布

本文链接：https://blog.csdn.net/m0_46995864/article/details/107183766

版权

JS 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

先看滚动条在顶部的界面和滚下去的界面：

非顶部状态：
在这里插入图片描述

顶部状态：
在这里插入图片描述
顶部状态时没有回到顶部的btn，head的高度也是比较小的；滚动下去以后会出现回到顶部按钮并且head栏会以一个动画效果完成拉长，还是比较美观的。
回到顶部按钮的出现和消失就是通过判断window.scrollY的值，如果为0即消失；如果大于0即显示。

点击btn回到顶部也很简单，就是注册一个click event，让页面的顶部距离为0。

js、html代码：

<body>
	<div id = 'head'></div>
	<div id = 'content'>
		<div id = 'btn'>回到顶部</div>
	</div>
	<script>
		var content = document.getElementById('content');
		var btn = document.getElementById('btn');
		var head = document.getElementById('head');
		document.onscroll = function(){
			if(scrollY > 0){
				btn.style.display = 'block';
				head.style.animation = 'headDown 1s forwards ';
				head.innerText = '拉伸状态';		
			}else{
				btn.style.display = 'none';
				head.style.animation = 'headUp 1s forwards ';
				head.innerText = '收缩状态';
			}
		}
		btn.onclick = function(){
			document.documentElement.scrollTop = 0;
			document.body.scrollTop = 0;
		}
	</script>
</body>

而head拉伸和收缩动画则是定义了一个css3自定义动画，通过设置起始和结束的高度，在scrollY>0和scrollY==0的时候调用不同的动画就可以实现。

css3：

<style>
		body{
			margin:0;
			padding:0;
		}
		#head{
			width:100%;
			height:60px;
			background-color: blue;
			opacity: 0.5;
			position: fixed;
			font-size: 20px;
			text-align: center;
			color:orange;
			line-height: 60px;
		}
		@keyframes headDown{
			from {height:60px;line-height:60px;}
			to {height:120px;line-height:120px;}
		}
		@keyframes headUp{
			from {height:120px;line-height:120px;}
			to {height:60px;line-height:60px;}
		}
		
		#content{
			width:100%;
			height:2000px;
			position: relative;
		}
		#btn{
			width:100px;
			height:100px;
			text-align: center;
			line-height: 100px;
			background-color: grey;
			opacity: 0.5;
			position: sticky;
			top:300px;
			left:1200px;
			display: none;
			cursor: pointer;
			transition: 0.3s;
		}
	</style>