前端JS返回顶部

最新推荐文章于 2024-02-01 16:58:38 发布

慕云枫

最新推荐文章于 2024-02-01 16:58:38 发布

阅读量279

点赞数

分类专栏：前端文章标签：前端JS返回顶部效果

本文链接：https://blog.csdn.net/weixin_43992507/article/details/90484694

版权

前端专栏收录该内容

94 篇文章 2 订阅

订阅专栏

css样式：

		#btnTop{
			position: fixed;
			bottom: 2%;
			right: 2%;
			background: white;
		    width: 45px;
		    height: 50px;
		    text-align: center;
		    line-height: 50px;
		    font-size: 35px;
		    border: 1px solid darkgray;
		    display: none;
		}
		#btnTop:HOVER {
			border: 1px solid lightskyblue;
			background: gainsboro;
			cursor: pointer;
			color:white;
		}

标签：

		<span id="btnTop" onclick="returnTop()" title="返回顶部">∧</span>

JS：

  		// 当网页向下滑动 20px 出现"返回顶部" 按钮
		window.onscroll = function() {
			scrollFunction()
		};
		function scrollFunction() {
			if(document.body.scrollTop > 20) {
				document.getElementById("btnTop").style.display = "block";
			} else {
				document.getElementById("btnTop").style.display = "none";
			}
		}
		// 点击按钮，返回顶部
		function returnTop() {
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
		}