Como hago que me muestre el titulo un poco antes

[iniciopublic]

Creo que no me se explicar bien

Tengo una tabla de contenido en css es la siguiente

<div id="indice">
<ul>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#html5">HTML5</a>
</li>
<li>
<a href="#php">PHP</a>
</li>
</ul>
</div>
<section>
<h3 id="css">Tutorial de CSS</h3>
<div class="section-content">
Un texto MUY largo....
</div>
</section>
<section>
<h3 id="html5">HTML 5</h3>
<div class="section-content">
Otro texto muy largo sobre HTML5
</div>
</section>
<section>
<h3 id="php">PHP</h3>
<div class="section-content">
Otro texto muy largo sobre PHP
</div>
</section>

El problema que al darle click al link y me envia en al parte donde esta el <h3></h3> me lo muestra en la parte superior de la pantalla del navegador , como hago que me muestre un poco mas abajo y que cuando me lleve al link lo haga lentamente

No se si es posible con css o javascript, le agradezco sus respuestas

[g3kdigital]

Este snippet de javascript te puede servir:

Código Javascript:

$('nav a').click(function(e){               
        e.preventDefault();     //evitar el eventos del enlace normal
        var strAncla=$(this).attr('href'); //id del ancla
    var $distance = - 50; //distancia en pixeles desde el objetivo
    var $tiempo = 1000; //tiempo en segundos => 1000 = 1seg
            $('body,html').stop(true,true).animate({                
                scrollTop: $(strAncla).offset().top+$distance
            },$tiempo);     
    });
 

Eso sí, esto usa Jquery, así que tienes que vincular la librería a u proyecto. No se mucho de javascript, por lo que no te puedo dar un snippet completamente vanilla, pero sería una mejor opción porque cargar una librería como jquery para solo hacer este efecto, no vale la pena.

Edito: Si entiendes más de programación que yo, te dejo un enlace a este post: https://escss.blogspot.com.co/2016/0...to-css-js.html donde con solo js imitan el efecto, espero te sirva.