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

<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>

<section id="link2">
    <h1>Maybe I love you so much I love you no matter who you are pretending to be.</h1>
    <ol>
        <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>
    </ol>
</section>

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;
    scroll({
        top: offsetTop,
        behavior: "smooth"
    });
    e.preventDefault();
}