470 reads

Building A Page Scroll in JavaScript

by Taimoor SattarMay 6th, 2021

Too Long; Didn't Read

In this tutorial, we build a page that responds on scroll. In the project folder, scroll-page.io is a project folder. When clicked, it can execute the function in Javascript to scroll the page to the top. The top text box appears at the bottom of the page. The reveal_img_scroll function reveals the image when the screen is scroll into view of the image. Display scroll position in percentage on screen. Use lipsum.com to generate long text and picsum.photos for photos.

Company Mentioned

featured image - Building A Page Scroll in JavaScript

In this tutorial, we build a page that responds on scroll. Here are the things that we will cover in this tutorial.

Click to navigate to the top of the page
Animate to reveal the image when its in view
Display scroll position in percentage on screen

You can view the full source code on Github.

👉👉👉 https://github.com/taimoorsattar7/page-scroll

Preview the final result at the below link.

👀👉👉 https://taimoorsattar7.github.io/page-scroll

Get Started

To get started, create a project folder, scroll-page. Name the project folder as you like. Inside of it, create the files as below.

scroll-page
└── index.html
└── script.js
└── style.css

In the index.html file, paste the code as below. Add long text and image so that, you will be able to scroll down into view.

<div class="scroll-bar">
  <div class="headline headline__text">
    <span id="scroll-percentage">0</span>
    % scroll
  </div>
</div>

<div onclick="scrollToTop()" class="top_pos">
  TOP
</div>

<div class="wrapper">

  <h2 class="headline headline--margin-b-large">
    About Website scroll
  </h2>
  <p class="headline headline__text">
    Place long text here...

    <img src="https://i.picsum.photos/id/1045/700/300.jpg?hmac=gWlSg2pLK_5xa7FmFKqyxI7S1nGeMCP8pJD9tnD-Y_0"
           alt="image"
           loading="lazy" />

  </p>

</div>

Use lipsum.com to generate long text and picsum.photos for photos.

In style.css, paste the below code to style HTML elements.

img {
  width: 100%;
  /* animate the image for 3s */
  transition: all 3s;
}

/* for Scroll progress baar percentage. */
.scroll-bar {
  position: fixed;
  z-index: 10;

  top: 10px;
  left: 50%;

  background-color: aqua;
  color: black;

  transform: translateX(-50%);

  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 7px;
  padding-right: 7px;
}

/* for TOP display. */
.top_pos {
  cursor: pointer;
  position: fixed;
  bottom: 25px;
  right: 25px;

  background-color: burlywood;
  padding: 8px;
}

Add defer attribute to the javascript, so that script executes/loads after the HTML page has rendered.

<script src="script.js" defer></script>

On the page, the TOP text box appears at the bottom of the page. When clicked, it can execute the function in Javascript to scroll the page to the top.

When the above HTML element is clicked, it executes the scrollToTop() Javascript function as define below:

function scrollToTop(){
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}

The above code scrolls smoothly to the top of the page when the user clicks.

Instead of using the scrollTo property of the window object, we can also use other properties in the window as defined below.

Next, we need to implement a scroll position progress bar.

In Javascript, we can listen to the scroll event listener so that, when the page scrolls, it can execute certain functions.

window.addEventListener('scroll', handleScroll());
function handleScroll(){
  // your logic here...
}

The problem with the above code is that it listens to scroll events every millisecond. Due to this reason, performance may affect. For a single scroll, it will execute the function many times.

Instead, we should wait for some milliseconds and then execute the function. For this, we have to define the debounce function as below.

function debounce(func, wait = 15, immediate=true) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

In the Javascript, rather than directly calling the handleScroll() function in the scroll event listener, we can wrap inside the debounce function as below.

window.addEventListener('scroll', debounce(handleScroll), { passive: true });

In the handleScroll function, We need to know what values we can use to define the scroll behavior. window object in javascript gives information about the scroll of the page.

Also, we can use the below value for HTML elements to calculate scroll behavior.

So, using the above information, we can define the scroll behavior of the page. We can define handleScroll function as below:

// Reference for scroll display HTML element
const scroll_pos = document.getElementById('scroll-percentage');

const handleScroll = () => {
  const position = window.pageYOffset;


  // update scroll progress bar
  var docHeight = (document.height !== undefined) ?
                    document.height - window.outerHeight :
                    document.body.offsetHeight - window.innerHeight;
  let page_offset = (window.pageYOffset);

  let scroll_value = Math.floor( (page_offset/docHeight) * 100);
  if (scroll_value > 100) scroll_value = 100;
  scroll_pos.innerText = scroll_value;

  // reveal image on scroll

  // uncomment the below line
  // reveal_img_scroll(page_offset + window.innerHeight)
};

In the handleScroll function, we have commented out the reveal_img_scroll function. Uncomment this line. reveal_img_scroll function reveals the image when the screen is scroll into view of the image.

When the DOM loads, we need to decrease the opacity of all the images to zero (0) and increase to 100% when the image is on the view of the window.

document.addEventListener("DOMContentLoaded", function(event) {
  document.querySelectorAll('img').forEach(function(img){
    img.style.opacity = "0.0";
  });
  handleScroll();
});

We can define the reveal_img_scroll function as below.

function reveal_img_scroll(scroll_page){
  document.querySelectorAll('img').forEach(function(img){
    if(
        (img.offsetTop < scroll_page) &&
        (img.style.opacity < 1)
      ){
      img.style.opacity = "1.0";
    }
  });
}