Edit in JSFiddle

jQuery(function(){
    // Guardamos el elemento h3 en una variable
    var _h3 = jQuery('.the_content h3');
    
    // Si hay más de un elemento h3...
    if (_h3.length > 0) {
        // ... vamos armando el indice
        _h3.each(function(i){
            // recuperando el ID,
            _id = jQuery(this).attr('id');
            // y mostrándolo en nuestra lista.
            jQuery('#indexList').append('<li><a href="#' + _id + '">' + jQuery(this).text() + '</a></li>' );
        });				
        
        // Mostramos la tabla de contenidos.
        jQuery('#indexContent').show();
    }
});
<div class="container">
    
    <!-- Creamos la capa con un ID y la ocultamos con "display:none" -->
    <div id="indexContent" class="well well-sm" style="display:none;">
        <strong>Tabla de contenidos</strong>
        <!-- Aquí se irán listando los índices -->
        <ol id="indexList"></ol>
    </div>
    
    <!-- Todos los títulos tienen que tener un ID para realizar el enlace adecuado hacia el mismo -->
    <div class="the_content">
        <h3 id="intro">Introducción</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
        
        <h3 id="content">Contenido</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
        
        <h3 id="outro">Conclusión</h3>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
/* USO LA LIBRERIA BOOTSTRAP PARA EL ESTILO */