Go-to-Top Anchor 链接不隐藏答案

【问题标题】：Go-to-Top Anchor link doesn't hideGo-to-Top Anchor 链接不隐藏
【发布时间】：2021-03-19 18:23:32
【问题描述】：

我正在尝试实现一个转到顶部的锚链接。最初它的位置固定在右下角。它的可见性是隐藏的。

网页一打开，我滚动，锚链接就可见了。

预期行为：当我单击锚链接时，它应该会转到顶部并将其可见性属性更改回隐藏。

真实行为：当我点击锚链接时，它会转到顶部但不隐藏。

#go-top-anchor {
  font-size: 1em;
  position: fixed;
  right: 2%;
  bottom: 5%;
  background-color: tomato;
  padding: 8px 8px;
  border-radius: 2px;
  visibility: hidden;
}

<html>

<head>
  <title>Title</title>
</head>

<body onscroll="anchor_visible()">
  <div id="top" style="height:300px;">
    <p>You're at the top div</p>
  </div>
  <div style="height:300px;">
    <p>You're at the bottom div</p>
  </div>
  <a id="go-top-anchor" onclick="hide_near_top()">Go-to-top</a>
  <script>
    function anchor_visible() {
      document.getElementById("go-top-anchor").style.visibility = "visible";
    }
  </script>
  <script>
    function hide_near_top() {
      location.href = "#top";
      document.getElementById("go-top-anchor").style.visibility = "hidden";
    }
  </script>
</body>

</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

如果不是在单击它时将其隐藏，而是在窗口滚动到顶部附近时将其隐藏，该怎么办？您可以使用window.scrollY，并将这两个功能合二为一。我不相信您需要其他功能，我相信您可以使用纯 HTML 来完成。

#go-top-anchor {
  font-size: 1em;
  position: fixed;
  right: 2%;
  bottom: 5%;
  background-color: tomato;
  padding: 8px 8px;
  border-radius: 2px;
  visibility: hidden;
}

<html>

<head>
  <title>Title</title>
</head>

<body onscroll="anchor_visible()">
  <div id="top" style="height:300px;">
    <p>You're at the top div</p>
  </div>
  <div style="height:300px;">
    <p>You're at the bottom div</p>
  </div>
  <a id="go-top-anchor" onclick="hide_near_top()">Go-to-top</a>
  <script>
    // Whenever the page scrolls
    function anchor_visible() {
      // If the window is scrolled down (more than a 20px buffer)
      if(window.scrollY > 20){
        // Show your button
        document.getElementById("go-top-anchor").style.visibility = "visible";
      }else{
        // Otherwise, hide your button
        document.getElementById("go-top-anchor").style.visibility = "hidden";
      }
    }

    function hide_near_top() {
      location.href = "#top";
    }
  </script>
</body>

</html>

【讨论】：

感谢您的快速回答。虽然你是对的，但我可以想象以更好的方式做到这一点。但我仍然无法理解为什么锚不会隐藏在我原来的实现中。有什么想法我可能做错了吗？
@user8570772 我同意你的观点，这有点奇怪。我认为主要是浏览器在您的document.getElementById("go-top-anchor").style.visibility = "hidden"; 之后滚动。所以它确实隐藏了一会儿，然后你的另一个函数anchor_visible 启动了，即使它正在向上滚动。也许您可以检查用户是否正在滚动向下？类似的东西。

【解决方案2】：

仅当用户从页面顶部向下滚动 10 像素或更多时才显示go-to-top 链接。页面上的任何滚动事件都会触发onscroll 事件，这就是为什么您必须检查滚动位置以显示go-to-top 链接的原因。

支持Element.scrollTop的浏览器比window.scrollY多。

<html>

<head>
  <title>Title</title>
</head>

<body onscroll="anchor_visible()">
  <div id="top" style="height:300px;">
    <p>You're at the top div</p>
  </div>
  <div style="height:300px;">
    <p>You're at the bottom div</p>
  </div>
  <a id="go-top-anchor" onclick="hide_near_top()">Go-to-top</a>
  <script>
    function anchor_visible() {
      // Check if the user scrolled down 10 pixels or more from the top of the page
      if (document.body.scrollTop > 10)
        document.getElementById("go-top-anchor").style.visibility = "visible";    
    }
  </script>
  <script>
    function hide_near_top() {
      location.href = "#top";
      document.getElementById("go-top-anchor").style.visibility = "hidden";
    }
  </script>
</body>

</html>

【讨论】：