<div class="container">
            <nav>
                <ul>
                    <li><a href="#section-1">Section 1</a></li>
                    <li><a href="#section-2">Section 2</a></li>
                    <li><a href="#section-3">Section 3</a></li>
                    <li><a href="#section-4">Section 4</a></li>
                </ul>
            </nav>
            <section id="section-1">
                <h1>Section 1</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis sed laboriosam cum quisquam unde consequuntur tenetur similique maiores obcaecati. Dignissimos, suscipit non perferendis doloremque tenetur aliquid ipsa! Minima, unde, eligendi.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, architecto, culpa, delectus magnam asperiores molestias atque impedit veniam soluta perferendis maxime deserunt quibusdam sequi totam fuga doloremque non perspiciatis ab?
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque error optio autem architecto nostrum? Nobis in ducimus dignissimos provident ratione vel impedit? Rerum odit beatae accusantium debitis nisi non hic.
                </p>
            </section>
            <section id="section-2">
                <h1>Section 2</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, porro amet tenetur deserunt aliquid vitae reprehenderit nihil ea! Debitis, vel, minus adipisci labore pariatur sapiente similique illum alias dicta itaque.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, fugiat, architecto, veritatis quam laboriosam consectetur eius rem dicta dolore aspernatur deserunt magnam excepturi eaque culpa accusantium harum recusandae quaerat vel!
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, iusto, at, aperiam tempora reprehenderit nesciunt repellendus amet ullam incidunt nemo praesentium consequatur blanditiis laborum. Modi reprehenderit et fugiat voluptatibus ab!
                </p>
            </section>
            <section id="section-3">
                <h1>Section 3</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, saepe, molestias, nisi voluptatum modi sit commodi pariatur recusandae aut veniam obcaecati quia quod laborum natus aspernatur atque repellendus porro ratione.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, nemo magnam vero ea eos porro laboriosam ad soluta nobis consectetur corporis est blanditiis at saepe officiis cupiditate assumenda eaque placeat!
                </p>
            </section>
            <section id="section-4">
                <h1>Section 4</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sed illo dolorem. Voluptate, tenetur quaerat perferendis velit magni neque cupiditate a minima dicta pariatur eveniet mollitia earum similique libero repellendus!
                </p>
            </section>
        </div>
        
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', sans-serif;
}
hr {
	margin: 50px 0;
}
.container {
    margin: 40px auto;
    width: 75%;
}
.element {
    padding:20px;
} 
a {
	color: #8CC152;
}
ul {
	list-style: none;
	padding-left:0;
}
nav {
	background-color: #fff;
	color: white;
  
  padding: 1em;
  
  margin-bottom: .5em;
}
section {
	padding: 1em;
	border: 1px solid #ddd;
	background-color: white;
	margin-bottom: 1em;
}
section:target {
	-webkit-animation: highlight .8s ease-out;
			animation: highlight .8s ease-out;
}
@-webkit-keyframes highlight {
	0% { background-color: #FFFF66; }
    100% { background-color: #FFFFFF; }
}
@keyframes highlight {
	0% { background-color: #FFFF66; }
    100% { background-color: #FFFFFF; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js