How to automatically create heading anchor links in #HTML with #jQuery and #CSS?

How to automatically create heading anchor links in #HTML with #jQuery and #CSS?


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.

 

 


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly.

Also, don't forget to share your views and/or feedback in the comment section below.

0 comments

 
© 2008-2018 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top