“返回顶部”功能涉及知识点

React.js学习, 简书项目 本文总阅读量次

记录一些关于返回顶部的功能知识点

window.scrollTo()

  • window.scrollTo()用于滚动到文档中的某个坐标。
  • 语法：window.scrollTo(x-coord,y-coord )
    • x-coord 是文档中的横轴坐标。
    • y-coord 是文档中的纵轴坐标。
  • 可参考MDN

window.onscroll 事件

  • 为当前页面的页面滚动事件添加事件处理函数。也就是只要页面滚动就会触发该事件处理函数。
  • 语法：window.onscroll = funcRef;
    • funcRef :函数类型的对象引用或者匿名函数.
  • 可参考MDN
  • 补充：普通的元素也可以使用onscroll事件

EventTarget.addEventListener()

  • EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该EventTarget对象触发指定的事件时，指定的回调函数就会被执行。
  • 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
  • 语法：element.addEventListener(event, function, useCapture)
    • event:必须。字符串，表示监听事件类型。
      • 注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
    • function:必须。指定当事件触发时执行的函数。
      • 事件对象会作为第一个参数传入该函数。
      • 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
    • useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
      • true - 事件句柄在捕获阶段执行
      • false- 默认。事件句柄在冒泡阶段执行
  • 可参考这篇笔记

window.addEventListener(“scroll”,func)

  • window.addEventListener("scroll",func)和window.scrollTo()= func;一样，用于滚动到文档中的某个坐标。

window 对象

  • window 对象表示浏览器中打开的窗口。
  • 如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
  • 所有浏览器都支持 window 对象。它表示浏览器窗口。
  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
  • 全局变量是 window 对象的属性。
  • 全局函数是 window 对象的方法。
  • 甚至 HTML DOM 的 document 也是 window 对象的属性之一：
    1
    2
    3
    window.document.getElementById("header");
    //与此相同：
    document.getElementById("header");
  • 详细

document 对象

  • 当浏览器载入 HTML 文档, 它就会成为 Document 对象。
  • Document 对象是 HTML 文档的根节点。
  • Document 对象使我们可以从JS脚本中对 HTML 页面中的所有元素进行访问。
  • 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

document.documentElement

  • document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。
  • 对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。
  • 注意： 如果 HTML 元素缺失，返回值为 null。
  • 可参考[MDN]（https://developer.mozilla.org/zh-CN/docs/Web/API/Document/documentElement）

document.body

  • document.body 属性用于设置或返回文档体。
    • 如果是返回, 该属性返回当前文档的 <body> 元素。
    • 如果是设置, 该属性会覆盖所有在 <body> 元素中的子元素, 并用新的内容来替换它。
  • 注意: 与 document.documentElement 属性不同的是， document.body 属性返回 <body> 元素， document.documentElement 属性返回 <html> 元素。

Element.scrollTop

  • Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
  • 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。
  • 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
  • 可参考MDN

document.documentElement.scrollTop

  • document.documentElement返回**<html>元素**
  • Element.scrollTop可获取一个元素的内容垂直滚动的像素数。
  • 即可使用document.documentElement.scrollTop获取当前页面的滚动条纵坐标位置(也就是<html>元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。)

js实现返回顶部实例

js实现返回顶部实例

React.js学习, 简书项目