<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
padding-bottom: 5210px;
}
header{
height: 100px;
background-color:orange;
width: 100%;
text-align: center;
}
#menu{
height: 40px;
width: 100%;
background-color:deepskyblue;
text-align: center;
}
</style>
</head>
<body>
<header>吸顶菜单</header>
<div id="menu" οnclick="returnback()">回到顶部</div>
<script>
window.onscroll = function(){
if(window.scrollY>=200){
document.querySelector("#menu").style.position = "fixed";
document.querySelector("#menu").style.left = "0";
document.querySelector("#menu").style.top = "0";
}else{
document.querySelector("#menu").style.position = "static";
}
}
function returnback(){
var scrollTop = window.scrollY;
var timi = setInterval(function(){
scrollTop=scrollTop-50;
window.scrollTo(0,scrollTop);
if(scrollTop<=0){
scrollTop=0;
clearInterval(timi);
}
},10)
}
</script>
</body>
</html>
