docs: scroll navigation to current active section

Add a custom JavaScript file to all HTML rendered docs output.

For now it only hosts a small code snipped which gets the current
active section link and bring it into view.
Needs to be triggered after DOM is initially loaded (which is still
before *all* resources like images, iframes, ... are necessarily
loaded), else the query cannot work.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

docs/Makefile

@@ -80,7 +80,7 @@ onlinehelpinfo:
 .PHONY: html
 html: ${GENERATED_SYNOPSIS} images/proxmox-logo.svg custom.css conf.py ${PRUNE_SIMULATOR_FILES}
 	$(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
-	install -m 0644 custom.css images/proxmox-logo.svg $(BUILDDIR)/html/_static/
+	install -m 0644 custom.js custom.css images/proxmox-logo.svg $(BUILDDIR)/html/_static/
 	install -dm 0755 $(BUILDDIR)/html/prune-simulator
 	install -m 0644 ${PRUNE_SIMULATOR_FILES} $(BUILDDIR)/html/prune-simulator
 	@echo

docs/conf.py

@@ -229,6 +229,10 @@ html_favicon = 'images/favicon.ico'
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ['_static']
 
+html_js_files = [
+    'custom.js',
+]
+
 # Add any extra paths that contain custom files (such as robots.txt or
 # .htaccess) here, relative to this directory. These files are copied
 # directly to the root of the documentation.

docs/custom.js

@@ -0,0 +1,7 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+    let activeSection = document.querySelector("a.current");
+    if (activeSection) {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+        activeSection.scrollIntoView({ block: 'center' });
+    }
+});