设置回到顶部按钮

IT噜噜

已于 2023-01-11 20:11:23 修改

阅读量580

点赞数 2

文章标签： javascript 前端 css

于 2023-01-10 23:56:09 首次发布

本文链接：https://blog.csdn.net/Ghlys/article/details/128638187

版权

该代码示例展示了如何使用CSS的`scroll-behavior`属性实现页面平滑滚动，并通过JavaScript监听滚动事件，当页面滚动超过一定距离时显示回到顶部的按钮，点击按钮则利用`window.scrollTo`将页面滚动到顶部，同时在回到顶部后使按钮消失。

摘要由CSDN通过智能技术生成

需求及实现原理：

点击按钮回到页面顶部—利用jsscrollTo滚动滑轮到指定位置
减速滑动—利用css的scroll-behavior平滑滚动样式
回到顶部后按钮消失—利用jsonscroll滚动距离设置if语句，当小于窗口高度设置按钮消失

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		html{scroll-behavior: smooth;}/*让鼠标平滑滚动减速*/
		body{height: 5000px;}/*设置滚动条*/
		#top{
			position: fixed;
			top: 500px;
			display:none;
		}/*回到顶部按钮*/
		.grey{width: 100%;height: 200px;background-color: gray;}
		.blue{width: 100%;height: 200px;background-color: blue;}
	</style>
</head>
<body>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<div class="grey"></div>
	<div class="blue"></div>
	<button id="top">回到顶部</button>
	<script>
		/*取窗口高度*/
		var long=innerHeight
		/*设置顶部按钮行为回到顶部*/
		top.onclick=function(){
			window.scrollTo(0,0)
		}
		/*设置顶部按钮的出现与消失*/
		window.onscroll=function(){
			if(document.documentElement.scrollTop>long){
			    function present(){
                    document.getElementById("top").style.display="inline-block"
			    }
				present()
			}else{function hidden(){
				document.getElementById("top").style.display="none"
			        }
				hidden()
            }
	    }
	</script>
</body>
</html>