1
私はウェブサイトを持っており、ページの1つにページの下部に「トップに戻る」ボタンがあります。私は、ページ上部のメインコンテンツの前にアンカータグを使用し、ボタンをリンクして、ユーザーを元に戻すようにしました。ただし、ページ上部のアンカータグが表示され、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;
}
ヘルプははるかに高く評価されています
はここで一例として、いくつかのコードです！