js控制点击按钮，返回顶部

最新推荐文章于 2024-03-19 10:15:00 发布

wx不存在

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量861

点赞数

分类专栏：前端文章标签： js html

本文链接：https://blog.csdn.net/weixin_39190732/article/details/105601714

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

HTML代码

<button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>

css代码

#myBtn {
	 display: none;
	 position: fixed;
	 bottom: 8%;
	 right: 15px;
	 z-index: 99;
	 border: none;
	 outline: none;
	 background-color: blue;
	 color: white;
	 cursor: pointer;
	 padding: 20px;
	 border-radius: 5px;
}

js代码

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

	//点击按钮，返回顶部
	function topFunction() {
		document.body.scrollTop = 0;
		document.documentElement.scrollTop = 0;
	}