一、我们的需求
1、滚动条滚动超过临界点的时候，顶部通栏显示，未超过就隐藏
2、滚动条滚动超过临界点，回到顶部按钮显示，未超过就隐藏
3、点击回到顶部按钮，滚动条滚动回到顶部
二、布局结构
1.需要一个顶部标签和一个回到顶部按钮标签
2.让页面超过浏览器可视窗口高度
3.设置顶部样式，默认是在超出页面的
4.设置回到顶部按钮样式，默认是在隐藏的
代码展示：
设置基本样式
<div class="header">顶部</div>
<div class="goTop">回到顶部</div>
//设置顶部样式
.header{
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: rgb(86, 226, 180);
transition: top 0.5s linear;
overflow: hidden;
position: fixed;
top: -80px;
left: 0;
}
//设置回到顶部样式
.goTop{
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
line-height: 25px;
color: #fff;
position: fixed;
bottom: 50px;
right: 50px;
display: none; /* 默认隐藏 */
}
三、逻辑分析
重点：
1.给浏览器绑定滚动事件，实时获取浏览器卷去的高度
2.判断卷去的高度决定隐藏还是显示
3.给回到顶部按钮绑定点击事件，点击的时候滚动回到顶部
首先
1、我们要获取header和goTop元素
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')
2、紧接着绑定事件
window.onscroll =function (){
//获取当前浏览器的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
3、判断浏览器卷去的高度是否大于我们的临界点来决定我们要做那些事情
if(height >= 300) {
// 设置行内样式显示顶部
header.style.top = '0px'
goTop.style.display = 'block'
} else {
// 设置行内样式隐藏
header.style.top = '-80px'
goTop.style.display = 'none'
}
}
4、给回到顶部绑定点击事件，使点击回到顶部的时候滚动回到顶部
goTop.onclick = function() {
window.scrollTo({
top:0,
behavior:'smooth'
})