diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..eb3a38f
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 03081c4..46b364d 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -7,3 +7,4 @@
     <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
   </div>
 </footer>
+<script src="/prettify.js"></script>
diff --git a/static/main.css b/static/main.css
index d348eea..a031fb6 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   color: rgb(36, 36, 36);
@@ -28,11 +32,29 @@ article > h1 {
   margin: 0.67em 0;
 }
 
+article > h2 {
+  margin: -0.83em 0 0.83em;
+  padding: 0.83em 0 0;
+}
+
 a {
   color: inherit;
   cursor: pointer;
 }
 
+a.anchor {
+  text-decoration: none;
+}
+
+a.anchor:hover {
+  text-decoration: underline;
+}
+
+a.anchor:hover:after {
+  color: #c0c0c0;
+  content: ' ¶';
+}
+
 p, ul, ol {
   margin: 0 0 2em;
 }
diff --git a/static/prettify.js b/static/prettify.js
new file mode 100644
index 0000000..ccaa7e3
--- /dev/null
+++ b/static/prettify.js
@@ -0,0 +1,20 @@
+'use strict';
+
+function activateAnchors() {
+  var article = document.querySelector('article');
+  if (!article) {
+    return;
+  }
+  var headings = document.querySelectorAll('h2').forEach(function (h) {
+    var id = h.id;
+    if (id) {
+      var a = document.createElement('a');
+      a.href = '#' + id;
+      a.className = 'anchor';
+      a.text = h.innerHTML;
+      h.innerHTML = a.outerHTML;
+    }
+  });
+}
+
+activateAnchors();