Estou criando uma página utilizando Bootstrap e gostaria de colocar algumas ancoras em locais específicos, acontece que como a página tem pouco conteúdo, o elemento que representa a ancora não vai para o topo quando clico no link que redireciona para ele, o exemplo abaixo produz exatamente o que acontece.
.div-margin {
margin-top: 80px
}
<a href="#l1">Ir para l1</a><br/>
<a href="#l2">Ir para l2</a><br/>
<a href="#l3">Ir para l3</a><br/>
<div id="l1" class="div-margin"><p>Você está na div-l1</p></div>
<div id="l2" class="div-margin"><p>Você está na div-l2</p></div>
<div id="l3" class="div-margin"><p>Você está na div-l3</p></div>
Nesse exemplo somente o Você está na div-l1 fica no topo da página quando clico em Ir para l1, os outros dois não funcionam de maneira semelhante, o que fazer para que ambos funcionem da mesma maneira, ou seja, fiquem no topo da página quando eu clicar no link correspondente?