我有一个网站，其中一个页面的底部有一个“返回顶部”按钮。我在页面顶部的主要内容之前使用了 anchor 标记，并链接了按钮以将用户带回顶部，因为它应该起作用。但是，页面顶部的 anchor 标记是可见的，即使我使用 CSS 标记“visibility: hidden”，它仍然保留标记所在的空间。我尝试使用“hidden="true""的内联 css，但这完全阻止了 anchor 标记的工作。请让我知道我需要使用哪种代码来使 anchor 工作，但不可见或在应有的位置留有空格。
这里有一些代码作为例子:
HTML
<!DOCTYPE html>
<html>
<head>
<a class="anchorTop" name="top" /*hidden="true"*/></a>
<link rel="stylesheet" href="CSS/main">
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>
<a href="index.html">Home</a> |
<a class="active" color="blue" href="about.html">About Us</a> |
<a href="extra.html">Fun Times</a>
</p>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem quam, porta eget convallis vel, lobortis et nunc. Praesent tempus nulla nec lectus congue scelerisque. Maecenas facilisis in felis vel rhoncus. Suspendisse a dapibus ante. Nulla placerat porttitor rhoncus. Fusce sed vehicula est. Donec ultricies aliquam bibendum. Nulla rutrum scelerisque eros. Pellentesque id libero orci. Pellentesque urna orci, vehicula quis condimentum sit amet, iaculis eget ipsum. Praesent congue ex ex, ut aliquet leo consequat at. In rhoncus tortor vel rutrum pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc commodo venenatis eleifend. Fusce sed rutrum erat.
<br />
<br />
Aenean eu nulla sit amet nisi placerat pharetra in vel magna. Curabitur quis eleifend diam. Morbi mattis enim a consequat mattis. Nulla tempus dui quis ex scelerisque blandit. Fusce lobortis neque nec vehicula ultrices. Sed eu ligula ultrices, consectetur leo at, tristique felis. Praesent et venenatis mi. Donec arcu ipsum, cursus a tincidunt vitae, finibus ac lectus. Ut finibus mollis ipsum, at fermentum mauris facilisis in. Suspendisse potenti. Sed bibendum arcu eu tincidunt mollis. Integer sodales, mi ac consequat tincidunt, purus orci ornare sem, sit amet sodales risus elit et est. Maecenas molestie enim quis aliquet consectetur. Ut volutpat sagittis enim ac consectetur.
<br />
<br />
Curabitur sit amet eros at enim finibus lacinia. Pellentesque pulvinar bibendum massa et bibendum. Nulla auctor, magna quis condimentum semper, lacus orci egestas erat, rhoncus vehicula tortor orci id leo. Vivamus eu dolor eros. Suspendisse vel magna leo. Vestibulum hendrerit eget risus at posuere. Phasellus sed lectus vel felis molestie mattis ut in nunc. Cras arcu purus, sagittis et lacus vel, pellentesque pulvinar nisi. Fusce a tortor nec quam ornare aliquet vitae ac lectus. Integer sed dolor porta, interdum mi in, sagittis nunc.
<br />
<br />
Morbi vel odio magna. Aliquam in dui elit. Donec et turpis pharetra, volutpat ligula non, sollicitudin risus. Integer pharetra justo ut congue iaculis. Proin ut accumsan enim. Vestibulum lorem ex, ultrices nec lorem non, auctor volutpat dolor. Aliquam tincidunt, risus iaculis fermentum tempor, ex est malesuada lacus, sit amet gravida risus erat vel ipsum. Sed rutrum malesuada ligula, consectetur suscipit justo aliquet id.
<br />
<br />
Ut vitae risus rutrum, fermentum quam eu, condimentum urna. Proin at cursus urna. In hac habitasse platea dictumst. Nam sit amet massa tellus. Donec tempor purus faucibus, mattis justo eget, iaculis urna. Etiam eget nisi at nulla dignissim ultrices et ac est. Nulla ornare, nisl nec pulvinar eleifend, libero mi feugiat nibh, vel convallis magna turpis vel felis. Aliquam eget eros eget tellus tempor facilisis. Curabitur posuere nisl ut molestie posuere. Suspendisse potenti. Nullam at tristique est. Suspendisse cursus semper tincidunt. Curabitur fringilla purus aliquam dolor volutpat, eu sagittis nisl interdum. Aenean vel ullamcorper augue, ac imperdiet dolor. Phasellus vulputate ante tellus, a cursus sem pellentesque et.
</p>
<a class="anchorBottom" href="#top">Back to top</a>
</div>
</body>
</html>
CSS
a.anchorTop {
text-decoration: none;
border: none;
background-color: none;
width: 0px;
height: 0px;
animation-name: none;
animation: none;
visibility: hidden;
}
a.anchorBottom {
color: black;
font-size: 30px;
border-color: gray;
border-style: outset;
border-radius: 10px;
border-width: 3px;
background-color: darkgray;
text-decoration: none;
padding: 3px;
}
非常感谢您的帮助!
最佳答案
您必须使用 display none css，因为可见性是元素的固定区域。如下所示
display:none;
关于html - 如何隐藏 anchor 标签，同时仍能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42743859/