Style in-page link targets using :target. http://codepen.io/leemark/pen/ncLFr

linktarget.html

<div class="container" id="main">
<nav>
  <h1>Navigation</h1>
  <ul>
    <li><a href="#lorem">Lorem ipsum dolor sit amet.</a></li>
    <li><a href="#invenitatis">In venenatis auctor eros sed rhoncus.</a></li>
    <li><a href="#utinorci">Ut in orci enim.</a></li>
    <li><a href="#donecdiam">Donec diam dolor.</a></li>
    <li><a href="#donectortor">Donec tortor mi.</a></li>
  </ul>  
</nav>
  
<section  id="lorem"> 
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>Consectetur adipiscing elit. Quisque adipiscing ullamcorper dolor at condimentum. Donec molestie porta interdum. In consectetur urna ut lectus gravida facilisis. Vestibulum rhoncus nisl sit amet mi tincidunt sit amet dictum massa pharetra. Sed feugiat, augue a bibendum dignissim, erat leo ultrices ligula, non vehicula nibh nisi ultricies nulla. Integer sapien nibh, auctor eget sollicitudin vel, convallis sed sapien. Nulla fringilla augue mauris.</p><a href="#top">back to top</a>
</section>
  
<section id="invenitatis">
  <h1>In venenatis auctor eros sed rhoncus.</h1> 
  <p>Nulla sed nunc arcu, vel iaculis leo. Fusce pellentesque imperdiet massa sit amet aliquet. Donec elementum eleifend urna, vel viverra ipsum consectetur a. Donec ultricies, est vitae facilisis sodales, nisl nisi varius elit, eu volutpat lorem massa fringilla enim. Aliquam tincidunt nunc velit, blandit vehicula ante. Nulla facilisi. Vivamus ullamcorper ipsum vitae tellus volutpat vel convallis sem vestibulum. Quisque eget diam arcu, vel rhoncus dui. Sed dui ante, convallis quis tempus sit amet, facilisis sed arcu.</p><a href="#top">back to top</a>
  </section>
<section id="utinorci">
  <h1>Ut in orci enim.</h1>
  <p>Cras vestibulum elit et diam commodo aliquam. Suspendisse aliquet velit sed augue vehicula nec varius risus sagittis. Praesent vehicula enim at nulla blandit interdum. Nullam semper, metus eleifend cursus commodo, leo sapien porttitor nisl, ac tincidunt ligula nibh vitae odio. Quisque rhoncus molestie ligula id fermentum. Suspendisse libero neque, dapibus et dictum eu, mollis eu mi. Nam urna massa, interdum aliquam vestibulum in, dignissim sit amet nibh. Nunc accumsan vulputate gravida. Donec consequat, neque eu molestie tincidunt, purus augue vulputate neque, id venenatis lorem metus non lacus. Quisque tempor lacus eu metus placerat convallis. Pellentesque justo turpis, pulvinar fringilla adipiscing at, viverra vitae magna. Etiam nisi tellus, aliquam eget venenatis sed, lacinia quis diam. Proin quis massa nulla. Donec egestas hendrerit facilisis. Vivamus consectetur, justo eu ultrices posuere, leo tellus porttitor mi, sed volutpat est nibh quis eros.</p><a href="#top">back to top</a>
 </section>
<section id="donecdiam">
  <h1>Donec diam dolor</h1>
<p>Elementum id interdum non, placerat in ipsum. Fusce sit amet est tortor. Quisque ac tortor vel libero suscipit hendrerit. In aliquam rutrum imperdiet. Ut in laoreet dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam interdum rhoncus euismod.</p><a href="#top">back to top</a>
</section>
<section id="donectortor">
  <h1>Donec tortor mi</h1>
  <p>Mollis non tempus sed, adipiscing et lectus. Nunc condimentum malesuada velit et feugiat. Morbi feugiat tellus quis orci feugiat aliquam imperdiet elit pulvinar. Fusce gravida neque eget risus tincidunt vitae sodales est semper. Donec at tincidunt elit. Fusce eleifend metus at quam mattis vitae ultrices mi fermentum. Nunc porttitor malesuada diam, sed venenatis arcu tempus quis. Ut nec purus at quam placerat lobortis vitae nec nunc. Vivamus sit amet neque risus, ultrices ultrices augue. Duis purus sem, pretium nec ultricies ac, imperdiet quis leo. Fusce pulvinar gravida erat. Nam vel leo eros, at venenatis lorem. Morbi orci dui, tincidunt nec congue et, commodo vitae augue.</p><a href="#top">back to top</a>
 </section>  
</div> 

script.js

// none

style.css

.container {
  max-width: 500px; 
  margin: 20px auto;
}
section:target {
	-webkit-animation: highlight 1.2s ease;
	-moz-animation: highlight 1.2s ease;
	-ms-animation: highlight 1.2s ease;
	-o-animation: highlight 1.2s ease;
	animation: highlight 1.2s ease;
}

@keyframes "highlight" {
 from {
    background: cornflowerblue;
 }
 to {
    background: white;
 }

}

@-moz-keyframes highlight {
 from {
   background: cornflowerblue;
 }
 to {
   background: white;
 }

}

@-webkit-keyframes "highlight" {
 from {
   background: cornflowerblue;
 }
 to {
   background: white;
 }

}

@-ms-keyframes "highlight" {
 from {
   background: cornflowerblue;
 }
 to {
   background: white;
 }

}

@-o-keyframes "highlight" {
 from {
   background: cornflowerblue;
 }
 to {
   background: white;
 }

}