<div class="container">
  <nav>nav</nav>
  <div class="items">
    <div class="item">item</div>
    <div>1234</div>  
  </div>
  123456789
  <footer>footer</footer>
</div>
body {
  position: relative;
  min-height: 100vh;
  background-color: blue;
}

.container {
  min-height: inherit;
  overflow: hidden;
}

.items {
  background-color: #ccc;
  margin-bottom: -100vh;
  padding-bottom: 100vh;
}

nav {
  height: 100px;
}

footer {
  position: absolute;
  bottom: 0;
  background-color: white;
  width: 100%;
  height: 100px;
}
const el = document.querySelector('.item');
document.body.addEventListener('click', () => {
  el.scrollIntoView();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.