Scroll Down “Below The Fold”

A lot of website layouts that I work with have an entire section that spans the width/height of the viewport on page load. It is not always immediately obvious to the user that they can scroll down to find more content.

Adding a “scroll down” prompt to this “above the fold” section is often helpful to encourage or notify the user to scroll.

This example has “above the fold” content (masthead) which spans the entire viewport height, as well as a fixed header. Clicking the “scroll down” icon will scroll the page down with the next section immediately at the top of the viewport without being blocked by the header.

CodePen

JavaScript

const header = document.querySelector('#site-header');
const masthead = document.querySelector('#site-masthead');
const scrollIcon = document.querySelector('.scroll');

const viewportHeight = window.innerHeight;
const headerHeight = header != null ? header.offsetHeight : 0;

// **************************************************
// Masthead Height
// **************************************************
const setMastheadHeight = () => {
    // calculate masthead height
    let mastheadHeight = viewportHeight - headerHeight;

    // apply masthead height value to masthead element
    if (masthead) {
        masthead.style.height = mastheadHeight  + 'px';
    };
};
setMastheadHeight();

// **************************************************
//  Scroll Down
// **************************************************
const scrollDown = () => {
    scrollIcon.addEventListener('click', () => {
        window.scrollTo({
            top: viewportHeight - headerHeight,
            behavior: 'smooth'
        })
    });
}
scrollDown();

HTML

<header id="site-header">
  <p>Site header</p>
</header>

<section id="site-masthead">
  <p>Above the fold content.</p>
  <i class="fa-solid fa-chevron-down scroll"></i>
</section>

<main id="site-content">
  <p>Below the fold content.</p>
</main>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

p {
  margin: 0;
  font-size: 1.5rem;
}

// **************************************************
//  Header
// **************************************************
header {
  position: sticky;
  top: 0;
  width: 100%;
  padding-block: 2em;
  z-index: 10000;
  background: #01539D;
  color: #fff;
  text-align: center;
}

// **************************************************
//  Section
// **************************************************
section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FAEAEB;
  text-align: center;
  gap: 2em;
}

// **************************************************
//  Scroll Down
// **************************************************
.scroll {
  display: block;
  cursor: pointer;
  
  &:before {
    font-size: 5rem;
    color: blueviolet;
  }

  &:hover,
  &:focus {
    &:before {
      color: rebeccapurple;
    }
  }
}

// **************************************************
//  Main
// **************************************************
main {
  background: lavender;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}