JEEZ WELCOME TO 2016 CODEPEN.

Now, like any well-presented written content on the web, Posts on CodePen have anchor links on all headers. You know, jump-down hash-links that allow you to link right to a section of a Post, if you need to.

Like this:

If you're interested in this kind of thing for your own project, we chose to do it client-side and using jQuery, which we already had available:

(function() {

  function slugify(text) {
    return text.toString().toLowerCase().trim()
      .replace(/\s+/g, '-') // Replace spaces with -
      .replace(/&/g, '-and-') // Replace & with 'and'
      .replace(/[^\w\-]+/g, '') // Remove all non-word chars
      .replace(/\-\-+/g, '-'); // Replace multiple - with single -
  }

  var $headers = $(".post-body :header");

  $headers.each(function(index) {

    var $el = $(this);

    var idToLink = slugify($el.text()) + '-' + index;

    var $headerLink = $("<a />", {
      html: "#",
      class: "article-headline-link",
      href: "#" + idToLink,
      id: idToLink
    });

    $el.prepend($headerLink);

  });

}());