Page Level Navigation

by qaisarferoz

HTML

In respose to <strong><a href="https://wordpress.stackexchange.com/questions/330564/how-do-i-create-page-navigation-linking-to-each-h2-within-the-page">This Question</a></strong>
<br><br>
<p><h1> Page Navigation</h1>
<ul class="page-nav"></ul>
</p>
<br><br>
<h2>a test</h2><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>another test</h2><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JavaScript

// 
var idx = 0;

$('h2').each(function() {
    var text = $(this).text();
        $(this).attr("id", 'heading' + idx);
    
    $('<li/>')
        .append($('<a />', {text: text, href:'#heading'+idx}))
        .appendTo('.page-nav');
                idx++;

});