我的「返回顶部」按钮在Firefox中失效，求技术排查解决

嗨，这个问题我碰到过好多次了——Firefox在处理页面滚动动画的时候确实有点“特立独行”！让我一步步帮你搞定它。

问题根源 #

你的代码里有两个可能导致Firefox失效的点：

1. 错误的比较符号：你写的>是HTML实体字符，在JavaScript里应该直接用>，不然浏览器会把它当成字符串来比较，导致滚动判断逻辑出错，按钮可能根本不显示。
2. 滚动容器的兼容性：Chrome、Edge等浏览器把body作为滚动容器，而Firefox只认html元素。虽然$("html, body").animate()在大部分情况下能工作，但Firefox对这种组合选择器的动画支持偶尔会出问题。

修正后的完整代码 #

下面是调整后的可兼容所有浏览器的版本：

<style>
.scroll-box {
  display: none; 
  position: fixed; 
  bottom: 2px; 
  right: 20px; 
  width: 32px; 
  height: 32px;
  cursor: pointer; /* 加上鼠标指针，提升交互体验 */
  line-height: 32px;
  text-align: center;
} 
.scroll-box:after {
  content: 'TOP';
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script>
$(document).ready(function () { 
  $(window).scroll(function () { 
    // 把HTML实体&gt;换成JS原生的>
    if ($(this).scrollTop() > 320) { 
      $('.scroll-box').fadeIn(); 
    } else { 
      $('.scroll-box').fadeOut(); 
    } 
  }); 
  $('.scroll-box').click(function (e) { 
    // 用preventDefault阻止a标签的默认跳转行为，比return false更灵活
    e.preventDefault();
    // 兼容Firefox的滚动动画写法，同时覆盖其他浏览器
    $('html').animate({ scrollTop: 0 }, 400);
    $('body').animate({ scrollTop: 0 }, 400);
  }); 
});
</script>

<a href="#" class="scroll-box" title="Back to top"></a>

额外优化建议 #

• 我给按钮加了cursor: pointer和文本居中样式，让它看起来更像可点击的按钮。
• 如果你想更优雅地处理滚动容器，可以用下面的判断逻辑，自动识别当前浏览器的滚动容器：

$('.scroll-box').click(function (e) { 
  e.preventDefault();
  const scrollContainer = $('html, body').filter(function() {
    return $(this).scrollTop() > 0;
  });
  scrollContainer.animate({ scrollTop: 0 }, 400);
});

这种写法会自动选择有滚动距离的元素来执行动画，兼容性更好。

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