Follow us on X (Twitter)  Like us on Facebook  Connect with us on LinkedIn  Subscribe to our YouTube Channel  Subscribe to our WhatsApp Group

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" 
        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 H1 and H2 tags, but you may like to add the other headings too. Here's the CSS for your reference:

 

 

<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 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>");
    });
  })
</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:

 

 

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.

 

Have a question? Or, a comment? Let's Discuss it below...

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.