写一个方法获取滚动条距离窗口顶部的距离

function getScrollTop() {
  /**
   * 获取滚动条距离窗口顶部的距离。
   *
   * @returns {number} 滚动条距离顶部的像素值。
   */
  if (typeof window.pageYOffset !== 'undefined') {
    // 对于现代浏览器，pageYOffset 是首选方式
    return window.pageYOffset;
  } else if (typeof document.documentElement.scrollTop !== 'undefined') {
    // 对于 IE 文档模式低于 9 的情况
    return document.documentElement.scrollTop;
  } else if (typeof document.body.scrollTop !== 'undefined') {
    // 对于旧版浏览器，例如 Quirks 模式下的 IE
    return document.body.scrollTop;
  } else {
    // 如果以上方法都失败，返回 0
    return 0;
  }
}


// 示例用法：
window.addEventListener('scroll', function() {
  const scrollTop = getScrollTop();
  console.log("滚动条距离顶部:", scrollTop);

  // 可以根据 scrollTop 的值执行其他操作，例如：
  if (scrollTop > 100) {
    // 当滚动条距离顶部大于 100px 时，显示“返回顶部”按钮
    // ...
  } else {
    // 隐藏“返回顶部”按钮
    // ...
  }
});


//更简洁的写法，利用 || 运算符的短路特性：
function getScrollTopSimple() {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}

解释:

window.pageYOffset: 这是获取滚动条垂直位置最标准和推荐的方式，兼容大多数现代浏览器。
document.documentElement.scrollTop: 在标准模式下 (几乎所有现代浏览器默认都是标准模式)，documentElement 表示 <html> 元素。如果 pageYOffset 不可用，则使用此方法。
document.body.scrollTop: 在 quirks 模式下 (旧版浏览器或未声明文档类型)，body 元素可能被滚动。为了兼容性，也需要检查这个值。
|| 0: 如果以上所有方法都返回 undefined，则返回 0，避免出现错误。