How to create custom URL in a one-pager?

I am developing a website using Kirby CMS, and the commission demands that the site remains a one-pager.

I am using the following structure where each article can be created in the panel, and customized (text, style, images …etc)

<?php foreach ($page->articles()->toStructure() as $article): ?>
    <div class="main" id="article-<?= $article->slug() ?>">
        <div class="container" onclick="toggleSibling(this);">
            <div class="Title"><?= $article->title() ?></div>
            <div class="Genre"><?= $article->genre() ?></div>
            <div class="Publisher"><?= $article->publisher() ?></div>
            <div class="Datum"><?= $article->datum()->toDate('m/Y') ?></div>
        </div>

        <!-- Apply the selected style dynamically -->
        <div class="content <?= $article->style() ?>">
            <div class="Info">
                <!-- <p>Information</p> -->
                <?= $article->info()->kt() ?>
            </div>
            <div class="Image">
            <!-- <p>Gallery</p> -->
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <?php foreach ($article->images()->toFiles() as $image): ?>
                            <div class="swiper-slide">
                                <img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>">
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <div class="swiper-scrollbar"></div>
                    <button class="slick-prev"></button>
                    <button class="slick-next"></button>
                </div>
            </div>
            <div class="Page">
            <!-- <p>Index</p> -->
            </div>
            <div class="Text">
            <!-- <p>Content</p> -->
                <?= $article->text()->kt() ?>
            </div>
        </div>
    </div>
<?php endforeach; ?>

The way it works is that each time an article is clicked, the main content becomes visible, which is executed with the following code:

function toggleSibling(element) {
  const content = element.nextElementSibling;

  // Close all other active content elements
  const allContent = document.querySelectorAll('.content.active');
  allContent.forEach(openContent => {
    if (openContent !== content) {
      openContent.classList.remove('active');
      Array.from(openContent.children).forEach(child => {
        child.style.transform = "";
        child.style.opacity = "";
        child.style.transition = "";
      });
    }
  });

  // Toggle the active class on sibling content
  content.classList.toggle('active');

  if (content.classList.contains('active')) {
    // Add the falling animation
    content.classList.add('fall');
    setTimeout(() => {
      content.classList.remove('fall');
      console.log("Falling animation removed from:", content); // Debugging animation reset
    }, 500);
  } else {
    // Reset styles if content is closed
    content.classList.remove('active');
    Array.from(content.children).forEach(child => {
      child.style.transform = "";
      child.style.opacity = "";
      child.style.transition = "";
    });
  }
}

What I am trying to implement is a way to utilize custom URL’s for each article. When a user accesses said URL, it takes them to the article and toggles the content.

The page should remain a one-pager.

Thank you for the help in advance!