<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();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.