Have you ever gone to a website to read about something, but the website has so much information that you wish you had a place to click and skip all of its content to the specific information you are interested in, or either navigate from top to bottom without scrolling the sidebar scrollbar, just like the “Table of Contents” section we have above?
An anchor link is an answer to your problem. It will make it so easy and fast for you to narrow down to what you need rather than scrolling through all of it and sometimes down and up several times because you don’t know exactly where the blogger placed it. In this article, let’s have a deep understanding of adding anchor links to scroll to a specific page section.
What is an anchor link?
You can view an anchor link from two perspectives: First, it is a hyperlink that you click to skip to a section of a document or a new page or website. Hyperlinks help the user to navigate between the webpage, websites by clicking on words, phrases, or even images.
It could be a sentence or a word in the middle of a blog, web pages, files, email addresses, locations on the same page, or anything else like a URL can address.
Second, as a table of content that looks like those in books but one that is clickable in that you don’t have to look for the page, it automatically takes you to the very content. Let’s call it an interactive table of content. The anchor tag element achieves all this.
Syntax of an anchor link
<a href="URL">Text Displayed</a>
The ‘href’ is a critical attribute in this anchor link since it indicates where the link will land. The ‘Text Displayed’ is visible to the reader, what the reader clicks on to move to the destination.
This is because once a reader clicks on the link text, they are directed to the specified location using the URL address.
Breakdown of the anchor tag element
Anchor links colors
- By default, the links are interpreted as shown below by the web browsers.
- For any un-visited link, it’s always underlined and blue in color
- For a visited link its always underlined and purple in color
- For any active link, it’s always underlined and red in color
Example
<!DOCTYPE html>
<html>
<head>
<title>Anchor Links</title>
<style type="text/css">
#visited{color: blue; }
#unvisited{ color: purple;}
#active{color: red;}</style>
</head>
<body>
<a id="visited" href="#">Visited</a><br>
<a id="unvisited" href="#">Unvisited</a><br>
<a id="active" href="#">active</a><br>
</body>
</html>
From the above example, we have directly defined the link colors to have a view of how they look. Below is the default CSS code that the browsers automatically execute when it meets the visited, un-visited or active link.
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
Anchor link target attribute
The target attribute helps to specify where you need to open the anchor link. By default, the target is normally set to the current browser window. But we can also play around with this and specify the target we need. These attributes include:
_self– This tells the browser to open the link on the same window it was clicked on.
_blank– This tells the browser to open the link in a new window
_parent– This tells the browser to open the link in a new window
_top– This tells the browser to open the link in the full body of the document
Example:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag</title>
<base https://thirdeyemedia.wpmudev.host/codeunderscored/author/moses/">
</head>
<body>
<p>Click any of the following links to see what happens</p>
<a href = "https://thirdeyemedia.wpmudev.host/codeunderscored/author/moses/" target = "_blank">0pens in New</a> <br>
<a href = "https://thirdeyemedia.wpmudev.host/codeunderscored/author/moses/" target = "_self">Opens in Self</a> <br>
<a href = "https://thirdeyemedia.wpmudev.host/codeunderscored/author/moses/" target = "_parent">Opens in Parent</a><br>
<a href = "https://thirdeyemedia.wpmudev.host/codeunderscored/author/moses/" target = "_top">Opens in Body</a><br>
</body>
</html>
Adding an anchor link to scroll page sections
This can be achieved in three ways. With the anchor link, you can scroll from the top to bottom of the page just by a click; you can also scroll to the section of the page. Let’s look at the three different ways to achieve this.
Using the #bottom
Using the #bottom in the anchor tag will help you navigate from the top of the page to the bottom with just a click on the anchor text. That means you do not need to scroll through the page yourself.
Syntax
<a href="#bottom">bottom</a>
Using the #top
The #top helps you navigate from the bottom of the page to the top of the page. You will only need to add the #top in the anchor tag, as shown below.
<a href="#top">top</a>
The worry with the two methods is that soon, it might not work in some browsers due to improvement in the HTML version. I would therefore recommend you using the next method we will look at, i.e., the Id selector.
Using the ID selector
To achieve this in a section, we can add an id attribute. The Id attribute helps to point to the destination area where the link should take you to. Unlike the #top and #bottom, the id attribute will help you scroll to the page’s specific section. With this, it’s possible to create a link to any element you may wish on the page.
Syntax:
<a id="Anchor_Name">Name of the location you want to jump to</a>
You will first create an Id selector and then create a link to the selector. We will use an # to create this connection.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
You can view at anchor link from two perspectives:
<br>
<p id="section"> First, it is a hyperlink that </p>. Hyperlinks help the user to navigate between the webpage, websites by clicking on words, phrases or even images.
<br>
<b><br>
You can view at anchor link from two perspectives: First, it is a hyperlink that you click to skip to a section of a document or to a new page or website.
<br>
Hyperlinks <a href="#section">Open</a> help the user to navigate between the webpage, websites by clicking on words, phrases or even images.</b>
</body>
</html>
In the above example we defined the id selector in a paragraph element.<p id=”section”> text</p> then we created a link to the selector. <a href=”#section”>text </a>. Whenever a user clicks the text in the link, it will scroll you automatically to where the id is referred to.
There are different types of this anchor types.
Anchor link within the header
We can add this anchor to ht HTML header elements. We have h1 to h6 in HTML.
<h1 id="anchor-name">Name of the section</h1> <h2 id="anchor-name">Name of the section</h2>
Anchor link within an image
When we use the image, we will automatically be scrolled to the specific page referenced upon clicking on the image.
<a href="#> <img id="anchor-name" src="image.png">
Anchor link within a paragraph
<p id="anchor-name">Paragraph name</p>
Point to note. The Id should be unique. That means each ID element should only appear once on the document page.
Link to an Email Address
When we use the mailto inside a href attribute, this will enable creating a link that will be able to open the user’s email program.
<a href="mailto:moses@gmail.com">Send email</a>
Conclusion
With that discussed, we can conclude that it’s wise to include anchor links in your website as it makes it easy to navigate through your content to save your clients the hustle to scroll, especially if your website contains so much information. They are straightforward to create, and you don’t need technical skills for this.
That is an absolute garbled mess of blah blah blah. All someone wanted was seven lines of code to show how to do it and you just kept blabbering on and on and on.
Thanks for your post! Super helpful for a beginner like me.