How to automatically create heading anchor links in HTML with jQuery and CSS?
In this article, we will learn how to create anchor links automatically in HTML, using jQuery and CSS.- Article authored by Kunal Chowdhury on .
In this article, we will learn how to create anchor links automatically in HTML, using jQuery and CSS.- Article authored by Kunal Chowdhury on .
If you have a website/blog, you may have some HTML headings (H1, H2, H3, H4, H5, H6 tags) to decorate the content headers and would like to create easy navigational anchor links, so that, people can easily copy the direct link specific to that heading.
Today, in this blog post, we will learn how easy it is to dynamically generate the links using CSS and jQuery. Continue reading to learn the step-by-step approach.
To get started, you need to first add the jQuery plugin into your page. Add the following script inside the <HEAD>
. . . </HEAD>
tag of your HTML page:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"/>
Now, add the following CSS style inside the <HEAD>
. . . </HEAD>
to decorate the page headings. For demonstrating purpose, I have used only
<style> .toc { text-decoration:none; } #anchor-icon { display:inline; background:url("anchor.jpg"); background-repeat:no-repeat; } a.heading-link { opacity:0; margin-left:10px; text-decoration:none; } h1:hover a.heading-link { opacity:1; } h2:hover a.heading-link { opacity:1; } </style>
Add the following JavaScript (jQuery) implementation inside the page. This could be either placed inside the <HEAD>
. . . </HEAD>
tag or before closing the </BODY>
tag. As the code is written inside the $(document).ready(function() { });
block, it will execute once the
<script type="text/javascript"> $(document).ready(function() { $("h1,h2").each(function(i) { var heading = $(this); var headingId = "topic" + (i + 1); heading.attr("id", headingId); heading.append("<a class='heading-link' href='#" + headingId + "'><div id='anchor-icon'>    </div></a>"); }); }) </script>
If you don't have the <H1/>
, <H2/>
tags inside your page, add few of them inside the <BODY>
. . . </BODY>
and provide string content to them. Now, run the web application and/or the HTML page. You will see the headings similar to this:
Hover over the headings and you will see an anchor icon shown beside the hovered headings. Hover over the icon and you will see a link associated with it. Click the icon to see the behavior. Make sure to place the icon named "
Wasn't it easy? How likely you would like to add the same in your web application? Please share your views with us by commenting below. Don't forget to share the links in your social channel and help your friend and colleagues to learn this.
NB: The same has been implemented in this site. You can navigate to any page and see the live demo.
Thank you for visiting our website!
We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.
We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.