Ok, this is an unusual question, but I've been playing around with it for hours and haven't had any progress - hoping the SO community can help! 🤓

Here's the webpage in question: https://pifornerds.io/

We're using this code to dynamically set the background (the digits of pi that you see in grey) height based on the foreground content length:

<script>
      // Dynamically set base height based on container contents
      var containerHeight = document.getElementById("container").offsetHeight;
      var baseHeight = document.getElementById("base").offsetHeight;
      if (baseHeight > containerHeight) {
        document.getElementById("base").style.height = containerHeight + "px";
      }
</script>

CSS snippet:

.layered {
  display: grid;
  justify-items: left;
  background-color: #222222;
  max-width: 1000px;
  margin: auto;
  height: auto;
  min-height: 100px;
  overflow: hidden;
}

.layered > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.base {
  font-family: "DejaVuSansMonoBold", courier;
  color: white;
  opacity: 0.1;
  max-width: 100%;
  height: 100%;
  word-break: break-all;
  margin-top: -3px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: static;
  z-index: 1;
  overflow: hidden;
}

.container {
  display: block;
  height: max-content;
  overflow: hidden;
}

We wanted to do this so there wouldn't be a bunch of pi digits in the footer area. We think it looks "cleaner" this way.

However, the menu at the top uses anchor links to jump to content lower on the page, for example:

<a href="#roadmap">Roadmap</a>

jumps to:

<a id="roadmap"></a>

Now here's the problem ...

After you click a menu anchor link, and then try to scroll back up the page to the top, you can't 🧐 ... because somehow the previous Javascript height update won't allow that.

This is as far up as I can scroll up now, after clicking "Roadmap":

Any ideas? Thanks in advance! 😀

EDIT: Here's a Fiddle: https://jsfiddle.net/imkane/kof83msy/4/ Of course it works properly there 😖