Scrollspy ToC

resources/components/common.less

@@ -341,11 +341,24 @@ a {
 					display: flex;
 				}
 
+				li {
+					color: @base-50;
+				}
+
+				li.active {
+					color: @accent-50!important;
+
+					> a {
+						color: inherit!important;
+					}
+				}
+
 				a {
 						display: inline-block;
 						margin-top: @content-margin-top;
 						color: @base-50;
 						background: 0;
+						transition-duration: 0s!important; // Turn off transitions
 
 						&:hover {
 							color: @base-30!important;

resources/mixins.less

@@ -116,7 +116,7 @@
 	background-size: 0 100%;
 	transition: @transition-background-quick, @transition-color-quick;
 
-	&:hover, &:active, &:focus {
+	&:hover {
 		outline: none;
 		color: white!important;
 		background-size: 100% 100%!important;

resources/scripts/ToC.js

@@ -0,0 +1,42 @@
+/*
+ * Citizen - ToC JS
+ * https://starcitizen.tools
+ *
+ * Smooth scroll fallback and Scrollspy
+ */
+
+const SmoothScroll = () => {
+  const navLinks = document.querySelectorAll('#toc a');
+
+  for (let n in navLinks) {
+    if (navLinks.hasOwnProperty(n)) {
+      navLinks[n].addEventListener('click', e => {
+        e.preventDefault();
+        document.querySelector(navLinks[n].hash)
+          .scrollIntoView({
+            behavior: "smooth"
+          });
+      });
+    }
+  }
+}
+
+const ScrollSpy = () => {
+  const sections = document.querySelectorAll('.mw-headline');
+
+  window.onscroll = () => {
+    const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
+
+    for (let s in sections)
+      if (sections.hasOwnProperty(s) && sections[s].offsetTop <= scrollPos) {
+        const id = mw.util.escapeIdForAttribute(sections[s].id);
+        document.querySelector('.active').classList.remove('active');
+        document.querySelector(`a[href*="${ id }"]`).parentNode.classList.add('active');
+      }
+  }
+}
+
+$(document).ready(function() {
+  SmoothScroll();
+  ScrollSpy();
+});

skin.json

@@ -34,7 +34,8 @@
 		"skins.citizen.js": {
 			"scripts": [
 				"resources/main.js",
-				"resources/scripts/Header.js"
+				"resources/scripts/Header.js",
+				"resources/scripts/ToC.js"
 			]
 		},
 		"skins.citizen.icons": {