Example using CSS :target pseudo-class along with jQuery for section background highlighting and smooth page scroling.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by [Zakir Tariverdiev] (http://www.zakir.li/) on CodePen.

License.

index.html

<article>
<h1>Lorem ipsum</h1>

<section id="s1">
<h2>Dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris convallis tincidunt tempus. Nulla facilisi. Donec rutrum facilisis arcu, ac sodales erat facilisis a. Integer commodo, tortor ac hendrerit sollicitudin, libero leo posuere enim, non imperdiet sapien leo a urna. Suspendisse a sagittis felis. Ut lacinia dapibus lectus eu interdum. Proin vel nisi auctor, tincidunt quam ac, eleifend dui.</p>
</section>  

<section id="s2">
<h2>Morbi at sollicitudin leo</h2>
<p>Proin placerat porttitor risus vitae aliquam. Aenean a diam egestas, dapibus libero et, accumsan lacus. In tristique sed dui ultricies condimentum. Morbi interdum nunc nisl. Morbi at sollicitudin leo, sed dictum augue. Cras nec orci libero. Donec non nisi at odio luctus fringilla a commodo lorem.</p>
</section>

<section id="s3">  
<h2>Vestibulum et nulla eget mauris</h2>
<p>Integer libero metus, lobortis ac neque vel, ultricies aliquam diam. Proin sodales vitae nisi sed pretium. Donec varius purus adipiscing aliquam pulvinar. Curabitur dictum in felis in ultrices. Nunc vitae justo sem. Mauris non lectus rutrum, pharetra ligula sed, malesuada ante. Suspendisse quis mi elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum et nulla eget mauris rhoncus rhoncus. Nunc ultrices tincidunt lorem, quis pretium sem. Duis ornare imperdiet arcu sed rutrum. Fusce volutpat pellentesque massa eget pretium. Maecenas libero mi, rutrum ac posuere cursus, ornare ac mi. Praesent non diam vel nibh feugiat pharetra. Nullam id massa et nisl pretium vehicula.</p>
<p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum et nulla eget mauris rhoncus rhoncus. Nunc ultrices tincidunt lorem, quis pretium sem. Duis ornare imperdiet arcu sed rutrum. Fusce volutpat pellentesque massa eget pretium. Maecenas libero mi, rutrum ac posuere cursus, ornare ac mi. Praesent non diam vel nibh feugiat pharetra. Nullam id massa et nisl pretium vehicula.</p>
  </section>
  
<footer>
  <ul>
    <li><a href="#s1">Section 1</a></li>
    <li><a href="#s2">Section 2</a></li>
    <li><a href="#s3">Section 3</a></li>
</footer>
</article>

script.js

$(document).ready(function() {
	$('[href*=#]:not([href=#])').click(function(e) {
		
		if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
		 || location.hostname == this.hostname) {
			
			// Construct an jQuery object from the hash and 
			// test to see if this object exists in DOM.
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
			if (target.length) {
				$('html,body').animate({
					scrollTop: target.offset().top
				});
        //return false; // To retain CSS :target styling, comment this line out
			}
		}
	});
});

style.css

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 1em;
    margin: 0 auto;
    width: 760px;
}

p {
    line-height: 1.5;
}

h1 { margin-bottom: 2em; }

section {
  padding: 1em;
  transition: background-color 0.7s;
}

section:target {
  background-color: #F0F0F0;
}