<ul id="top">
  <li><a href="#one">Chapter One</a></li>
  <li><a href="#two">Chapter Two</a></li>
  <li><a href="#three">Chapter Three</a></li>
</ul>

<h2 id="one">Chapter One</h2>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<a href="#top">Back to top</a>

<h2 id="two">Chapter Two</h2>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assu menda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<a href="#top">Back to top</a>


<h2 id="three">Chapter Three</h2>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus optio quod quibusdam? Doloribus accusamus exercitationem dicta reprehenderit minus assumenda sit facilis a inventore, delectus nobis aperiam laudantium. Quis, laboriosam harum?</p>

<a href="#top">Back to top</a>
// Animate scrolling only if users don’t prefer reduced motion
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  
  // Add some spacing between the target and the top of the viewport
  :target {
    scroll-margin-top: 0.8em;
  }
}

body {
  max-width: 80ch;
  font-family: sans-serif;
  line-height: 1.6;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.