BOM是什么
Window对象
document对象属于windows对象
全局变量是window的属性
好处:方便多个js文件使用同一个html
内置函数普遍是window的方法
窗口尺寸相关属性
resize事件
已卷动高度
不是只读的话,可以控制页面卷动高度
scroll事件
Navigator对象
History对象
Location对象
重新加载当前页面
GET请求查询参数
BOM特效开发
返回顶部按钮开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 5000px;
background-image: linear-gradient(to bottom, blue, green, yellow);
}
.backtotop {
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, .6);
position: fixed;
bottom: 100px;
right: 100px;
/* 小手状 */
cursor: pointer;
}
</style>
</head>
<body>
<div class="backtotop" id="backtotopBtn">返回顶部</div>
<script>
var backtotopBtn = document.getElementById('backtotopBtn');
var timer;
backtotopBtn.onclick = function () {
// 设表相关
clearInterval(timer);
// 设置定时器
timer = setInterval(function () {
// 让滚动条往上面滚动
document.documentElement.scrollTop -= 200;
// 定时器要停
if (document.documentElement.scrollTop <= 0) {
clearInterval(timer);
}
}, 20);
}
</script>
</body>
</html>
楼层导航小效果