回到顶部实例一
效果：默认隐藏导航栏，当滚动条滚到超过300px后导航栏和按钮出现，点击回到顶部按钮回到顶部，并隐藏导航栏和按钮（导航栏和按钮都是固定定位）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
height: 3000px; /*让滚动条出现*/
}
.DW {
display: flex; /*固定定位*/
justify-content: center; /*让文字水平居中*/
align-items: center; /*让文字垂直居中*/
width: 100%;
height: 80px;
background-color: green; /*背景颜色绿色*/
color: aliceblue;
font-size: 2em;
transition: top .5s linear; /*导航栏过渡出现和隐藏*/
position: fixed; /* 绝对定位，不管滚动条上下滚动都在相应的位置*/
top: -80px; /*隐藏导航栏*/
left: 0;
}
.goTop {
width: 50px;
height: 50px;
background-color: aquamarine;
font-size: 20px;
text-align: center;
line-height: 25px;
color: azure;
position: fixed; /*固定定位*/
bottom: 50px;
right: 50px;
display: none; /*隐藏按钮*/
}
.divTop:hover+.topdhl{ /*隐藏的div触发时生效（兄弟关系） ，*/
/*.divTop:hover .topdhl （父子关系）*/
top: 0px;
transition: top .5s linear; /*导航栏过渡出现和隐藏*/
}
.divdhl:hover{ /*导航栏触发时生效*/
top: 0px;
transition: top .5s linear; /*导航栏过渡出现和隐藏*/
}
.fusu{
display: flex; /*固定定位*/
width: 100%;
height: 10px;
left: 0;
}
</style>
</head>
<body >
<div class="fusu divTop"></div>
<div class="DW topdhl divdhl" id="dhl">导航栏</div>
<buttion class="goTop" id="gotop">回到顶部</buttion>
<script>
//获取导航栏和按量元素
var topw=document.getElementById("dhl")
var goTop=document.getElementById("gotop")
//滚动滚动条触发事件
window.onscroll=function(){
//获取滚动条位置
var jhlheight=document.documentElement.scrollTop||document.body.scrollTop
//判断滚动条位置
if(jhlheight>=300){
topw.style.top="0px" //显示滚动条
goTop.style.display="block" //显示按钮
}else{
topw.style.top="-80px" //隐藏滚动条
goTop.style.display="none" //隐藏按钮
}
}
//点击按钮事件
goTop.onclick=function(){
window.scrollTo({ //设置滚动条位置
top:0, //回到顶部
behavior:"smooth" //平滑过渡
})
}
</script>
</body>
</html>