返回顶部按钮scroll事件仅在屏幕宽度<1279px时生效的问题

可能原因及解决方向： #

• CSS样式被宽屏规则覆盖
  虽然你没手动设置断点，但页面全局样式或其他组件可能存在@media (min-width: 1280px)这类媒体查询，强制修改了按钮的visibility、opacity或display属性。
  排查方法：用浏览器F12开发者工具，在宽屏状态下选中按钮元素，查看右侧Styles面板，检查是否有继承或外部规则覆盖了按钮的显示属性（比如display: none、visibility: hidden）。

• 滚动事件监听对象错误
  宽屏状态下页面可能存在独立的滚动容器（比如某个带overflow: scroll的侧边栏或主内容区），此时$(window).scroll()监听的是窗口滚动，但实际内容滚动发生在容器内，导致$(window).scrollTop()始终为0，无法触发按钮显示。
  验证方法：宽屏时打开控制台，输入$(window).scrollTop()并滚动页面，若数值始终为0，说明需要将滚动事件绑定到实际滚动的容器上，比如$('#main-content').scroll(function() { ... })。

• 按钮被宽屏元素遮挡
  宽屏时可能显示了右侧侧边栏、悬浮导航等元素，刚好覆盖了按钮位置，或者这些元素的z-index高于按钮的1000，导致按钮被隐藏在下层。
  排查方法：用开发者工具的元素选择器选中按钮，查看它的位置和层级，确认是否被其他元素覆盖。

• 脚本逻辑被宽屏干扰
  页面其他脚本可能在宽屏状态下修改了按钮的类或样式，比如自动移除show类。
  验证方法：宽屏滚动页面后，在控制台输入$('#backtotop-button').hasClass('show')，若返回false说明滚动事件没触发或逻辑失效；若返回true但按钮不显示，说明是CSS样式问题。

快速验证步骤： #

1. F12打开开发者工具，切换到1280px以上的宽屏模式
2. 选中#backtotop-button，检查Styles面板中opacity和visibility的实际值
3. 滚动页面，在Console输入$(window).scrollTop()确认数值是否超过300
4. 手动执行$('#backtotop-button').addClass('show')，看按钮是否显示：
   • 显示：滚动事件逻辑有问题，需检查事件绑定或监听对象
   • 不显示：CSS样式被覆盖，需排查宽屏相关样式规则

内容的提问来源于stack exchange，提问作者ArthurCL