<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.