求助：无JS时显示返回顶部图标，有JS时按需显示的实现方案

我让Ken Lee写了个返回顶部按钮的脚本，现在按钮默认隐藏，用户滚动后才显示。但我想到有些用户会因为安全原因禁用JS，这类用户根本看不到这个按钮。

我需要实现的效果：

• 禁用JS时：返回顶部图标一直可见
• 启用JS时：没滚动的时候隐藏，滚动后显示，点击回到顶部后再隐藏

现在的DIV是visibility:hidden，改成visible的话按钮就一直显示，只有点击后才消失。附上现有代码，求解决办法。

现有HTML代码 #

<div id="bottomx" style="visibility: hidden">
  <img
    src="img/toparrow.png"
    style="cursor: pointer"
    class="icons"
    title="Seitenanfang"
    onclick="javascript:xtop();"
  />
</div>

现有JS脚本 #

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"
></script>

<script>
  function xtop() {
    $("#content").animate({ scrollTop: 0 }, "slow", function () {
      // Animation complete.
      document.getElementById("bottomx").style.visibility = "hidden";
    });
  }
</script>

<script>
  content.addEventListener("scroll", function () {
    if (this.scrollY == 0) {
      document.getElementById("bottomx").style.visibility = "hidden";
    } else {
      document.getElementById("bottomx").style.visibility = "visible";
    }
  });
</script>

核心思路很简单：默认让按钮可见（给禁用JS的用户用），然后用JS在页面加载时立刻把它藏起来，这样开JS的用户一开始看不到，后续靠滚动逻辑控制显示隐藏。

1. 修改HTML #

把DIV的style="visibility: hidden"改成style="visibility: visible"，让按钮默认就显示：

<div id="bottomx" style="visibility: visible">
  <img
    src="img/toparrow.png"
    style="cursor: pointer"
    class="icons"
    title="Seitenanfang"
    onclick="javascript:xtop();"
  />
</div>

2. 修改JS脚本 #

加一段页面加载完成后隐藏按钮的代码，其他原有逻辑保留：

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"
></script>

<script>
  // 页面加载完立刻隐藏按钮（开JS的用户才会执行这步）
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("bottomx").style.visibility = "hidden";
  });

  function xtop() {
    $("#content").animate({ scrollTop: 0 }, "slow", function () {
      // 回到顶部后隐藏按钮
      document.getElementById("bottomx").style.visibility = "hidden";
    });
  }
</script>

<script>
  content.addEventListener("scroll", function () {
    if (this.scrollY == 0) {
      document.getElementById("bottomx").style.visibility = "hidden";
    } else {
      document.getElementById("bottomx").style.visibility = "visible";
    }
  });
</script>

逻辑说明 #

• 禁用JS的用户：按钮默认是可见的，没有JS修改它的状态，所以一直能看到。虽然点击按钮没有滚动动画，但用户可以手动滚动，按钮的存在不影响使用。
• 启用JS的用户：页面加载完成后，JS立刻把按钮设为隐藏状态，后续滚动时根据滚动位置切换显示/隐藏，回到顶部后再次隐藏，完全符合需求。

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