Question

我有一个网站，其中一个页面底部有一个“返回顶部”按钮。我在页面顶部的主要内容之前使用了锚标记，并链接了按钮以使用户返回顶部，因为它应该工作。但是，页面顶部的锚标记是可见的，即使我使用CSS标记“visibility：hidden”，它仍然保留标记所在的空间。我尝试使用“hidden =”true“”的内联css，但这阻止了锚标签完全工作。请让我知道我需要使用哪种代码来使锚点工作，但是不可见或有空间应该是它。

以下是一些代码示例：

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;
}

非常感谢帮助！

Answer 1

你必须使用display none css，因为visiblity是element的粘性区域。如下所示

display:none;

如何使锚标记隐藏起来，同时使其仍然有效

1 个答案: