BOM

BOM（ Browser Object Model，浏览器对象模型）是JS与浏览器窗口交互的接口

一、常用BOM对象

1.Window对象：alert、console都是window的方法

注意 如果需要获取不包含滚动条的窗口宽度，需要使用下面的属性

document.documentElement.clientWidth
document.documentElement.clientHeight

document.documentElement.scrollTop属性也表示窗口卷动高度，但是window.scrollY是只读属性

var scrollTop = window.scrollY || document.documentElement.scrollTop;

• resize事件：在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener('resize')来绑定事件处理函数
• scroll事件：在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或者window.addEventListener('scroll')来绑定事件处理函数

  2.Navigator对象：浏览器的相关属性和标识

  | 属性 | 意义 | |:---------:|:------------| | appName | 浏览器官方名称 | | appVersion | 浏览器版本 | | userAgent | 浏览器的用户代理（含有内核信息和封装壳信息） | | platform | 用户操作系统 |

  3.History对象：提供了操作浏览器会话历史的接口

  // 浏览器返回上一页
  history.back()
  history.go(-1)
  

4.Location对象：浏览器进行页面跳转

// 浏览器跳转
window.location = 'https://www.baidu.com';
window.location.href = 'https://www.baidu.com';
// 页面刷新
window.location.reload(true);
// 获取链接参数
window.location.search

二、开发一个返回顶部按钮

<div class="backtotop" id="backtotopBtn">返回顶部</div>

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;
}

var backtotopBtn = document.getElementById('backtotopBtn');

var timer;
backtotopBtn.onclick = function () {
  // 设表先关
  clearInterval(timer);

  // 设置定时器
  timer = setInterval(function () {
      // 不断让scrollTop减少
      document.documentElement.scrollTop -= 200;
      // 定时器肯定要停
      if (document.documentElement.scrollTop <= 0) {
          clearInterval(timer);
      }
  }, 20);
};