页面滚动条下拉到指定位置之后,触发事件,显示导航条, 点击回到顶层 通过锚点回到页面顶部
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动条下移一定距离显示导航条</title>
<style type="text/css">
#main{
width: 100%;
height: 70px;
background: #ccc;
line-height: 70px;
text-align: center;
}
#box{
width: 100%;
height: 50px;
background: #f00;
line-height: 50px;
text-align: center;
position:fixed;
top: 0;
display: none;
}
input{
width: 700px;
height: 40px;
border: 0;
border-radius: 30px;
}
.main{
height: 1500px;
margin: 0 auto;
background: pink;
}
*{
margin: 0;
padding: 0;
}
#top{
width: 80px;
height: 80px;
color: red;
line-height: 80px;
background: #ccc;
position: fixed;
right: 50px;
bottom: 50px;
z-index: 2;
text-align: center;
display: none;
border-radius: 50%;
}
a{
text-decoration:none;
color: red;
}
</style>
</head>
<body>
<div id="main">
<input type="" name="" value="">
</div>
<div id="box">
<input type="" name="" value="">
</div>
<div class="main"></div>
<div id="top"> <a href="#main">返回顶层</a></div>
<script type="text/javascript">
window.onload=function(){
//获取页面滚动事件
var d=document.getElementById('box');
var t=document.getElementById('top');
document.onscroll=function(){
if(document.documentElement.scrollTop>300){
d.style.display="block";
t.style.display="block";
}
else {
d.style.display="none";
t.style.display="none";
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
1:下拉显示的导航条,不是原导航条,有些尽管一模一样,但是是一个新的
2:document.onscroll 获取页面滚动事件
3:document.documentElement.scrollTop> 300判断是否下拉到指定位置
4:返回顶层使用的锚点 href="#main"