feat: Add "Jump to" navigation to FE

src/ts/frontend.ts

@@ -448,10 +448,14 @@ function resultsControlCard(): string {
 				data-bs-toggle="collapse" data-bs-target=".resultsToggle"
 				aria-expanded="true" aria-controls="resultsToggleAll">
 					Hide / Show All
-				</button>
-				</div>`;
+				</button>`
+
+	// Add navigation ("Jump to..") control container
+
+	resultsControl += `<div id="resultsNav" class="my-2"></div>`;
 
-	resultsControl += `</div>`;
+	resultsControl += `</div>`;	// class="card-body"
+	resultsControl += `</div>`;	// id="resultsControl"
 	return resultsControl
 }
 
@@ -470,6 +474,16 @@ function addVariantControl(controlCard: JQuery<HTMLElement>,
 			   `);
 }
 
+/**
+ * return navigation anchor for variant, based on `cutoff`
+ * for append()ing
+ * also add horizontal separator (TODO: move this elsewhere?)
+ */
+function variantNavAnchor (cutoff: number): string {
+	return `<hr />
+	<a name="variant-c${String(cutoff)}"></a>`;
+}
+
 function getResults():void {
 	// Disable 'roll' button
 	$("#mainRoll").prop("disabled", true);
@@ -479,6 +493,7 @@ function getResults():void {
 
 	$("#results").append(resultsControlCard);
 	let controlCardBody = $("#results").find("#resultsControl .card-body");
+	let controlCardNav = controlCardBody.find("#resultsNav");
 
 
 	let maxDice = 10;
@@ -486,6 +501,9 @@ function getResults():void {
 	let cutoffMax = 9;
 	for (let cutoff = cutoffStart; cutoff <= cutoffMax; cutoff++) {
 		let variantControlAdded = false;
+		// Start of cutoff, add navigation anchor for variant
+		$("#results").append(variantNavAnchor(cutoff));
+		// Roll the dice for this variant
 		for (let i = 1; i < maxDice; i++) {
 			let rsSetup = { numDice: i, diceOptions: { successCutOff: cutoff } };
 			let rollstats = new RollStats(rsSetup);
@@ -501,6 +519,10 @@ function getResults():void {
 			if (!variantControlAdded) {
 				addVariantControl(controlCardBody, resultProperties);
 				variantControlAdded = true;
+
+				// also add navigation to that anchor on the control card navigation section
+				controlCardNav.append(` <a class="btn btn-primary" href="#variant-c${String(cutoff)}">Jump to ${resultProperties.diceVariant}</a> `);
+
 			}
 			$("#resultsProgress").width(`${i/maxDice*100}%`);
 			$("#resultsProgress").text(`${i/maxDice*100}%`);