Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Anchor Points
You probably know how to make a standard link if you’re reading this, but do you know how to link to a specific place on a web page?The "name" anchor will allow you do to things like linking from a menu at the top of a page to specific places further down the page, or from the bottom back to the top. You can also link to specific sections on a page from other pages if the page you want to link to has a name anchor where you need it.
To begin, you need to know where you want the anchor point. For this example, we’ll say you have a long page of content and want to make a link from the bottom of the page back to the top.
At the top of the page then, just under the body tag, you'd enter the following code:
That’s the name anchor. It’s like a normal anchor tag except name replaces href and you don’t place any anchor text between the opening and closing tags. This allows the tag to remain hidden.
The name's value can be anything you want. I used "top" because it makes sense, but I could have used "bottom" and the link would work the same. The name does not affect the function. I use names that are relevant to the anchor point, usually. Sometimes I feel whimsical and call an anchor point Fizzbang or something equally silly.
You can place anchor tags anywhere you want on a page, and use as many as you need to use. For a live example of anchor tags, at the end of this tutorial I’ve included a link back to the top.
Now, for the second part of the tag. This is the part that is the link people see and can click on. Place the following tag in your code at the point where you want the link to be on the page:
The hash mark (#) means the link is to a name anchor. Since there is no other page name or domain name used before the hash tag, this also tells the browser the anchor is in the existing document. After the hash mark write the name of the anchor you created, which was top in this example.
Wherever you include this link it will jump the visitor back to the top of the page when they click it.
See the note at the end of the tutorial, there is a situation where it doesn't work as expected, but is easily fixed.
If you have another anchor point that is named "Fizzbang" then you'd code the link that takes your visitor to Fizzbang as follows:
Now let's suppose you are really proud of your Fizzbang and want to place a link to it from another page on your site so your visitor will be taken to the page with the Fizzbang content and have the page open precisely where the Fizzbang content starts.
To do that, you'd code your regular link and then add the hash mark and the name anchor after the regular URL:
Check Out my Incredible Fizzbang! </a>
You can link up and down pages like a wild coyote if you want. And if you’ve ever seen a wild coyote make links, you’d be . . . hallucinating.
NOTE | If you use a "sticky" menu at the top of your page see the additional instructions below. |
You have to compensate for the sticky menu or the link to the name anchor will be off a bit. If you find that's the case, place this code in the <head> section of your page:
a.anchor{
display: block;
position: relative; top: -59px;
visibility: hidden;}
</style> </head>
Change the distance, -59px in this example, to the approximate height of your sticky menu. You may have to made a few guesses to narrow it down.
The second part is to add that "anchor" class to your "name" anchor. Here's how:
Those two adjustments should put you in good shape. And now, as promised, take a ride Back to the Top.
