设置一个回到顶部的按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14

document.querySelector('.get-top').addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
});

window.addEventListener('scroll', () => {
  if (window.scrollY !== 0) {
    document.querySelector('.get-top').style.opacity = '1';
  } else {
    document.querySelector('.get-top').style.opacity = '0';
  }
});

也可以直接在 html 或者 body 里设置滚动的 css

1
2
3
4

body,
html {
  scroll-behavior: smooth;
}

(发现 safari 还不兼容 scroll-behavior，其他浏览器都能兼容，那能有什么办法，绝不能惯它，就主动等它兼容)

顺便补充一些我一直混乱的地方:

• window 视图属性

  • innerHeight 表示获取窗体的内部高度,不包括用户界面元素
  • outerHeight 表示整个浏览器窗体的大小,包括任务栏等
  • pageYOffset 表示整个页面滚动的像素值
  • screenY 浏览器窗口在显示器中的位置

• screen 视图属性

  • availHeight 显示器可用高度,不计算例如底部的固定任务栏
  • height 显示器屏幕的真实高度

• 元素视图属性

  • clientTop 表示内容区域的左上角相对于整个元素左上角的位置（包括边框）
  • clientHeight 表示内容区域的高度和宽度，包括 padding 大小，但是不包括边框和滚动条。
  • offsetTop 表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。
  • offsetHeight 整个元素的尺寸（包括边框）
  • scrollTop 表示元素滚动的像素大小。可读可写。
  • scrollHeight 表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于 clientWidth 和 clientHeight。当你向下滚动滚动条的时候，scrollHeight 应该等用于 scrollTop + clientHeight。

• 鼠标位置

  • clientX clientY 相对于 window，为鼠标相对于 window 的偏移。
  • pageX pageY 为鼠标相对于 document 的坐标
  • screenX screenY 鼠标相对于显示器屏幕的偏移坐标。

参考来源:张鑫旭-CSSOM 视图模式(CSSOM View Module)相关整理