js浏览器操作工具函数及方法说明（滚动到底部顶部指定元素，打开及退出全屏，获取可视窗口宽高）

一.滚动到页面顶部

1.函数代码

  const scrollToTop = () => {
      const height = document.documentElement.scrollTop || document.body.scrollTop;
      if (height > 0) {
          window.requestAnimationFrame(scrollToTop)
          window.scrollTo({
              top:0,
              behavior:"smooth"
          });
      }
  };

2.代码说明

Element.scrollTop：可以获取或设置一个元素的内容垂直滚动的像素数

window.scrollTo()：滚动到文档中的某个坐标

window.scrollTo(x-coord,y-coord )
// x-coord 是文档中的横轴坐标
// y-coord 是文档中的纵轴坐标

window.scrollTo(options)
/**
 * options 包含三个属性的对象：
 *  top 等同于 y-coord
 *  left 等同于 x-coord
 *  behavior 类型 String，表示滚动行为，支持参数:
 *    smooth(平滑滚动)
 *    instant(瞬间滚动)
 */

window.requestAnimationFrame()：告诉浏览器-你希望执行一个动画，并且要求浏览器在下一重绘之前调用指定的函数更新动画。之前执行。优势：由系统决定决定功能的执行时机。60Hz的刷新频率，然后每次刷新的间隔中会执行一次替换函数，不会引起丢帧，不会卡顿。

二.滚动到页面底部

 const scrollToBottom = () => {
  window.scrollTo(0, document.documentElement.clientHeight);
};

三.滚动到指定元素区域

1.函数代码

 const smoothScroll = (element) => {
  document.querySelector(element).scrollIntoView({
    behavior: "smooth",
  });
};

2.代码说明

Element.scrollIntoView(): 会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

参数说明
alignToTop: Boolean 型参数

①如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐，对应：

 scrollIntoViewOptions: {block: "start", inline: "nearest"}

②如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐，对应：

scrollIntoViewOptions: {block: "end", inline: "nearest"}

scrollIntoViewOptions: Object 型参数

①behavior:定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

②block:定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

③inline:定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"

四.获取可视窗口宽度

1.函数代码

const getPageViewWidth = () => {
  return (
    //document.compatMode 表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。
    document.compatMode == "BackCompat"
      ? document.body
      : document.documentElement
  ).clientWidth;
};

2.代码说明

document.compatMode() 有两个值：

"BackCompat"：文档为怪异模式/混杂模式。

"CSS1Compat"：文档不是怪异模式，意味着文档处于标准模式或者准标准模式。

Element.clientWidth和Element.chientHeight取值如图:

五.获取可视窗口高度

const getClientHeight = () => {
  let clientHeight = 0;
  if (document.body.clientHeight && document.documentElement.clientHeight) {
    clientHeight =
      document.body.clientHeight < document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  } else {
    clientHeight =
      document.body.clientHeight > document.documentElement.clientHeight
        ? document.body.clientHeight
        : document.documentElement.clientHeight;
  }
  return clientHeight;
};

六.打开浏览器全屏

const toFullScreen = () => {
  let element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen();
  }
};

七.退出浏览器全屏

 const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};