Voici un petit bout de code rapide pour réaliser un sommaire des titres (H1) dans une page de publication assez longue, avec un retour vers le sommaire sous le titre :
var WebPart_SommaireAncres_Variable_Sommaire_CodeRetourSommaire = "<div class='WebPart_Sommaire_RetourSommaire'><a class='WebPart_Sommaire_RetourSommaire_a' href='#Sommaire'>Retour Sommaire</a><img class='WebPart_Sommaire_RetourSommaire_img' src='/_layouts/DemoCorp/images/WebPart_Sommaire_Fleche-Haut.png' /></div>"
jQuery(document).ready(function () {
var divMainResize = document.getElementById('MainResize');
/* Ajout des ancres sur les H1 */
var divh1Array = divMainResize.getElementsByTagName('h1');
for (var i = 0; i < divh1Array.length; i++) {
// Ajoute l'id qui permet au menu d'identifier le titre
jQuery(divh1Array).attr("id", "sommaireIndex" + i);
// Ajoute le lien de retour vers le sommaire
jQuery(divh1Array).after(WebPart_SommaireAncres_Variable_Sommaire_CodeRetourSommaire);
}/* Ajout du sommaire */
var elSommaire = jQuery("<a name='Sommaire'></a>");
jQuery(divMainResize).prepend(elSommaire);
// Génération du sommaire
var elContenuSommaire = jQuery("<div id='WebPart_Sommaire'></div>").appendTo(elSommaire);
jQuery("<h1 class='WebPart_Sommaire_h1'>Sommaire</h1>").appendTo(jQuery(elContenuSommaire));
var elSommaireListe = jQuery("<ul class='WebPart_Sommaire_Liste_Lien_ul'></u>");
jQuery(elSommaireListe).appendTo(jQuery(elContenuSommaire));
for (var i = 1; i < divh1Array.length; i++) { // Début à 1 car nous ajoutons un H1 avec le titre du sommaire
var contenuLi = jQuery("<li class='WebPart_Sommaire_Liste_Lien_li'></li>");
jQuery(contenuLi).appendTo(elSommaireListe);
var contenuLinkLi = jQuery("<a class='WebPart_Sommaire_Liste_Lien_a' href='#sommaireIndex" + (i - 1).toString() + "'>" + divh1Array.innerHTML + "</a>");
jQuery(contenuLinkLi).appendTo(contenuLi);
}
});
Avec un peu de CSS et des images cela devrait rendre quelque chose de pas mal du tout !