<a href="#link1">Vai a link 1</a>
    <a href="#link2">Vai a link 2</a>

<section id="link1">
    <h1>We need rest. The spirit is willing, but the flesh is spongy and bruised.</h1>
    <h3>Say what? I'll get my kit!</h3>
    <p>You don't know how to do any of those. Goodbye, friends. I never thought I'd die like this. But I always really hoped.</p>

<section id="link2">
    <h1>Maybe I love you so much I love you no matter who you are pretending to be.</h1>
        <li>Good news, everyone! There's a report on TV with some very bad news!</li>
        <li>I'm a thing.</li>
        <li>There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors!</li>
nav {
    position: fixed;
    display: block;
    top: 10px;
    left: 10px;

nav a {
    padding: 0 10px;

section {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100vh;
    align-content: center;
    padding: 0 32px;
    box-sizing: border-box;

section:nth-child(odd) {
    background-color: #f0f0f0;
const links = document.querySelectorAll("a");

links.forEach((link) => link.addEventListener("click", scrollTarget, false));

function scrollTarget(e) {
    let href = this.getAttribute("href");
    let offsetTop = document.querySelector(href).offsetTop;
        top: offsetTop,
        behavior: "smooth"

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.