CODEWITHSUNDEEP
htmlcssanchor
Potato Man
Potato Man

Reputation: 11

How to make anchor tag hidden while still making it work

I have a website and one of the pages has a "back to top" button at the bottom of the page. I have used an anchor tag before the main content at the top of the page, and linked the button to take the user back to the top as it should work. However, the anchor tag at the top of the page is visible, and even when I use the CSS tag "visibility: hidden" it still retains a space where the tag is. I tried using inline css of "hidden="true"" but that stopped the anchor tag from working altogether. Please let me know what kind of code I need to use to make the anchor work, but not be visible or have a space where it should be.

Here's some code as an example:

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

Help is much appreciated!

Upvotes: 1

Views: 398

Answers (1)

bharat savani
bharat savani

Reputation: 339

You have to use display none css because visiblity is tack area of element.like below 

display:none;

Upvotes: 1

Related Questions