<div id="authors">
  <ul>
    <li><a href="#author1">Author 1</a></li>
    <li><a href="#author2">Author 2</a></li>
    <li><a href="#author3">Author 3</a></li>
  </ul>
</div>

<div id="author1-info">
  <div id="author1">
    <h2>Author 1</h2>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
    <p>Information about Author 1</p>
  </div>
</div>
<div id="author2-info">
  <div id="author2">
    <h2>Author 2</h2>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
    <p>Information about Author 2</p>
  </div>
</div>
<div id="author3-info">
  <div id="author3">
    <h2>Author 3</h2>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
    <p>Information about Author 3</p>
  </div>
</div>

@media (max-width: 768px) {
  #author-info {
    position: relative;
  }
}

const links = document.querySelectorAll("#authors a");
links.forEach(link => {
link.addEventListener("click", event => {
event.preventDefault();
const authorId = event.target.getAttribute("href") + "-info";
const author = document.querySelector(authorId);
  if (window.matchMedia("(max-width: 768px)").matches) {
  author.scrollIntoView({ behavior: "smooth", block: "start" });
}
  });
});