网页滚动监听：当页面滑到特定位置时自动浮现HTML联系按钮-html教程-PHP中文网

最稳的滚动位置判断方式是使用 window.scrolly，因其为现代标准 api，返回视口垂直偏移量，不依赖文档渲染状态或 body/html 滚动容器差异，而 scrolltop 在部分安卓 webview 和旧浏览器中易返回假 0。

网页滚动监听：当页面滑到特定位置时自动浮现html联系按钮

直接用 window.scrollY 判断滚动位置最稳，别依赖 $(window).scrollTop() 或 document.body.scrollTop —— 后两者在部分安卓 WebView 和旧浏览器里会返回 0，哪怕页面明明已滚动。

为什么 scrollY 比 scrollTop 更可靠

window.scrollY 是现代标准 API，返回的是当前视口垂直偏移量，不依赖文档渲染状态或 body/html 的滚动容器差异。而 document.documentElement.scrollTop 和 document.body.scrollTop 在不同浏览器、不同 DOCTYPE 下谁有值谁没值，逻辑混乱，容易读到假 0。

移动端 Safari、Chrome 最新版默认用 window.scrollY，兼容性好
IE 不支持 window.scrollY，但 IE 已淘汰，无需兜底
首次读取必须等 DOMContentLoaded 触发后，否则可能拿到 0（DOM 还没 layout 完）

监听滚动并触发按钮显示的最小可行代码

不用 jQuery，纯原生写法更轻、更可控，也避免了 jQuery 的兼容层干扰：

const contactBtn = document.getElementById('contact-btn');
const triggerOffset = 600; // 滚动到距顶部 600px 时浮现

function handleScroll() {
  if (window.scrollY >= triggerOffset) {
    contactBtn.style.display = 'block';
  } else {
    contactBtn.style.display = 'none';
  }
}

// 必须等 DOM 加载完再绑定，否则 contactBtn 可能为 null
document.addEventListener('DOMContentLoaded', () => {
  contactBtn.style.display = 'none'; // 初始隐藏
  window.addEventListener('scroll', handleScroll);
});

contact-btn 元素需提前设 position: fixed，否则 display 切换会导致布局跳动
不要在 scroll 回调里反复 querySelector，缓存 DOM 引用
避免用 fadeIn/fadeOut，它们依赖 jQuery 动画队列，原生用 CSS transition 更稳

防抖不是可选，是必须加的性能底线

快速滚动时，scroll 事件每秒可能触发上百次。不做节流，handleScroll 就会高频重绘，导致掉帧甚至卡死。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

用 requestAnimationFrame 节流是最简方案：只保证每帧最多执行一次
别用 setTimeout 防抖——它会让按钮响应延迟明显，用户滚过触发点才出现
移动端还要额外监听 touchmove（带 { passive: false }），否则 iOS Safari 可能漏掉首帧

节流版写法：

let ticking = false;
function handleScroll() {
  if (!ticking) {
    requestAnimationFrame(() => {
      if (window.scrollY >= triggerOffset) {
        contactBtn.style.display = 'block';
      } else {
        contactBtn.style.display = 'none';
      }
      ticking = false;
    });
    ticking = true;
  }
}

CSS 定位和过渡细节决定体验是否自然

按钮浮现不是简单 show/hide，视觉断层会让人觉得“弹出来”。关键在两处：

#contact-btn 必须设 position: fixed; bottom: 20px; right: 20px;，脱离文档流，避免影响其他元素
用 opacity + transform 替代 display 切换，配合 CSS transition 实现淡入上滑：transition: opacity 0.3s ease, transform 0.3s ease;
初始状态设 opacity: 0; transform: translateY(20px);，触发时改 opacity: 1; transform: translateY(0);