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. The step-by-step guide will help you mastering the skills to add navigational links for all H1, H2, H3, H4, H5, H6 tags. - Article authored by Kunal Chowdhury on , and was last updated on 2018-04-02T18:42:35Z.

How to automatically create heading anchor links in #HTML with #jQuery and #CSS?
Follow us on:    Twitter  |  Mastodon  |  Facebook  |  WhatsApp  |  Telegram  |  Google News

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.


Here's how to automatically create heading anchor links in HTML using CSS and jQuery


How to do it...

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" 


Now, add the following CSS style inside the <HEAD> . . . </HEAD> to decorate the page headings. For demonstrating purpose, I have used only H1 and H2 tags, but you may like to add the other headings too. Here's the CSS for your reference:


  h1:hover a.heading-link
  h2:hover a.heading-link


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 DOM has been loaded.


<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'>&#160;&#160;&#160;&#160;</div></a>");


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:


This is 'Heading 2' > Hover on it

This is also 'Heading 2' > Hover on it


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 "anchor.jpg" in the same directory of the page or refer it to a relative path of the web application.


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.