Javascript 转到顶部锚定链接'；隐藏_Javascript_Html_Css

Javascript 转到顶部锚定链接'；隐藏

javascript html css

Javascript 转到顶部锚定链接'；隐藏,javascript,html,css,Javascript,Html,Css,我正在尝试实现一个到顶部的锚链接。最初，其位置固定在右下角。它的可见性是隐藏的一旦网页打开，我滚动，锚链接就可见了预期行为：单击锚定链接时，它应转到顶部，并将其可见性属性更改回隐藏真实行为：当我单击锚定链接时，它会转到顶部，但不会隐藏 #上锚{ 字号：1em；位置：固定；右：2%；底部：5%；背景色：番茄；填充：8px 8px；边界半径：2px；可见性：隐藏； } 标题你是最高级别的你在最底层登顶函数锚定_可见（）{ document.getElementById

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

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

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

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

#上锚{
字号：1em；
位置：固定；
右：2%；
底部：5%；
背景色：番茄；
填充：8px 8px；
边界半径：2px；
可见性：隐藏；
}


标题
你是最高级别的
你在最底层
登顶
函数锚定_可见（）{
document.getElementById（“go top anchor”）.style.visibility=“visible”；
}
函数hide_near_top（）{
location.href=“#top”；
document.getElementById（“go top anchor”）.style.visibility=“hidden”；
}

如果在单击时不隐藏它，而是在窗口靠近顶部滚动时隐藏它，该怎么办？您可以使用

window.scrollY

，将两个函数合并为一个函数。我不认为您需要其他函数，我相信您可以使用纯HTML来完成

#上锚{
字号：1em；
位置：固定；
右：2%；
底部：5%；
背景色：番茄；
填充：8px 8px；
边界半径：2px；
可见性：隐藏；
}


标题
你是最高级别的
你在最底层
登顶
//每当页面滚动时
函数锚定_可见（）{
//如果向下滚动窗口（超过20px的缓冲区）
如果（window.scrollY>20）{
//显示您的按钮
document.getElementById（“go top anchor”）.style.visibility=“visible”；
}否则{
//否则，隐藏按钮
document.getElementById（“go top anchor”）.style.visibility=“hidden”；
}
}
函数hide_near_top（）{
location.href=“#top”；
}

如果在单击时不隐藏它，而是在窗口靠近顶部滚动时隐藏它，该怎么办？您可以使用

window.scrollY

，将两个函数合并为一个函数。我不认为您需要其他函数，我相信您可以使用纯HTML来完成

#上锚{
字号：1em；
位置：固定；
右：2%；
底部：5%；
背景色：番茄；
填充：8px 8px；
边界半径：2px；
可见性：隐藏；
}


标题
你是最高级别的
你在最底层
登顶
//每当页面滚动时
函数锚定_可见（）{
//如果向下滚动窗口（超过20px的缓冲区）
如果（window.scrollY>20）{
//显示您的按钮
document.getElementById（“go top anchor”）.style.visibility=“visible”；
}否则{
//否则，隐藏按钮
document.getElementById（“go top anchor”）.style.visibility=“hidden”；
}
}
函数hide_near_top（）{
location.href=“#top”；
}

仅当用户从页面顶部向下滚动10个或更多像素时，才显示“转到顶部”链接

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>


标题
你是最高级别的
你在最底层
登顶
函数锚定_可见（）{
//检查用户是否从页面顶部向下滚动了10个像素或更多
如果（document.body.scrollTop>10）
document.getElementById（“go top anchor”）.style.visibility=“visible”；
}
函数hide_near_top（）{
location.href=“#top”；
document.getElementById（“go top anchor”）.style.visibility=“hidden”；
}

仅当用户从页面顶部向下滚动10个或更多像素时，才显示“转到顶部”链接

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>


标题
你是最高级别的
你在最底层
登顶
函数锚定_可见（）{
//检查用户是否从页面顶部向下滚动了10个像素或更多
如果（document.body.scrollTop>10）
document.getElementById（“go top anchor”）.style.visibility=“visible”；
}
函数hide_near_top（）{
location.href=“#top”；
document.getElementById（“go top anchor”）.style.visibility=“hidden”；
}

谢谢您的快速回答。虽然你是对的，但我可以想象用更好的方式来做这件事。但我仍然无法理解为什么anchor没有隐藏在我最初的实现中。有没有想过我会做错什么？@user8570772我同意你的看法，这有点奇怪。我认为最主要的是浏览器在

document.getElementById（“go top anchor”）.style.visibility=“hidden”之后滚动。所以它确实隐藏了一瞬间，然后你的另一个函数anchor\u visible
启动了，即使它正在向上滚动。也许你可以检查一下用户是否在向下滚动？差不多吧。谢谢你的快速回答。虽然你是对的，但我可以想象用更好的方式来做这件事。但我仍然无法理解为什么anchor没有隐藏在我最初的实现中。有没有想过我会做错什么？@user8570772我同意你的看法，这有点奇怪。我认为最主要的是浏览器是滚动的