Target en scroll-margin-top: ankers met zakken en animatie

:target {animation: highlight 1s ease;}

@keyframes highlight 
{
  0% {border-left-color: red;}
  100% {border-left-color: white;}
}

.targettarget {padding-bottom: 500px;} <!-- om zakken te tonen -->

.targettarget > div 
  {
    border-left: 40px solid white;
    transition: all 0.5s ease;     
    scroll-margin-top: 130px;  
  }

echo "<nav>";
echo "<a href='#one'>1</a>";
echo "<a href='#two'>2</a>";
echo "<a href='#three'>3</a>";
echo "</nav>";

echo "<div class='targettarget mt mt_s'>";

echo "<div id='one'>";
echo "<h3>One</h3>";
echo "<div>Pellentesque habitant morbi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime.</div>";
echo "</div>";

echo "<div id='two'>";
echo "<h3>Two</h3>";
echo "<div>Pellentesque habitant morbi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime.</div>";
echo "</div>";

echo "<div id='three'>";
echo "<h3>Three</h3>";
echo "<div>Pellentesque habitant morbi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime.</div>";
echo "</div>";

echo "</div>";