JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Överdäckningen | Link 2</title>
    <link rel="stylesheet" href="../css/style2.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main>
      <img src="../imgs/template1300.jpg" alt="template1300" id="backdrop" />
      <header id="header">
        <a href="index.html" id="home-link"><h1>ÖVERDÄCKNINGEN</h1></a>
        <nav>
          <div id="menu-toggle">
            <input id="menu-checkbox" type="checkbox" />
            <span class="hamburger-span"></span>
            <span class="hamburger-span"></span>
            <span class="hamburger-span"></span>
            <ul id="menu">
              <li><a class="menu-links" href="../index.html">Länk 1</a></li>
              <li><a class="menu-links" id="active" href="#">Länk 2</a></li>
              <li><a class="menu-links" href="link3.html">Länk 3</a></li>
              <li><a class="menu-links" href="link4.html">Länk 4</a></li>
            </ul>
          </div>
        </nav>
      </header>
      <div class="content-wrapper">
        <h1 id="content-title" class="content">Överdäckningen</h1>
        <p id="main-content-text" class="content">
          Mer djupgående om ett ämne inom arbetet :) Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Amet, et. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint
          architecto voluptas laborum cum, quasi maxime aspernatur placeat porro quibusdam quae vero
          asperiores eius voluptates at saepe excepturi provident facere et. Debitis expedita,
          reiciendis necessitatibus...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: initial;
}

body {
  background-color: #262626;

  font-family: "Roboto Slab", serif;

  position: relative;
  overflow-x: hidden;
}

main {
  width: 100%;
  height: 100vh;
}

#backdrop {
  position: relative;
  top: 4rem;

  width: 100%;
  height: 91vh;

  border-radius: 0 0 1.4rem 1.4rem;
}

#home-link {
  color: #f2f2e4;
  text-decoration: none;
  font-family: "Space Mono", monospace;

  position: fixed;
  top: 0.8rem;
  left: 1.4rem;
}

#home-link h1 {
  font-size: 1.7rem;
  font-weight: 400;
}

#header {
  background-color: #0c0c0c;

  height: 4rem;
  width: 100%;

  position: fixed;
  top: 0;

  z-index: 10;
}

/* Hamburger menu */
#menu a {
  text-decoration: none;
  color: #262626;
}

#menu a:hover {
  color: #0c0c0c;
}

#menu-toggle {
  display: block;

  position: fixed;
  top: 1.35rem;
  right: 1.4rem;

  z-index: 1;
}

#menu-checkbox {
  display: block;

  width: 40px;
  height: 32px;

  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  z-index: 2;
}

#menu-toggle span {
  display: block;

  width: 33px;
  height: 4px;

  margin-bottom: 5px;
  position: relative;

  background: #f2f2e4;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menu-toggle span:first-child {
  transform-origin: 0% 0%;
}

#menu-toggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menu-checkbox:checked ~ span {
  opacity: 1;

  transform: rotate(45deg) translate(-2px, -1px);

  background: #3f403b;
}

#menu-checkbox:checked ~ span:nth-last-child(3) {
  opacity: 0;

  transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-checkbox:checked ~ span:nth-last-child(2) {
  opacity: 1;

  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  width: 60vw;
  height: 70vh;

  position: absolute;
  right: -100px;

  margin: -100px 0 0 0;
  padding: 50px;
 ...

JavaScript

mybutton = document.getElementById("scroll-button");

window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
}