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, . Name the project folder as you like. Inside of it, create the files as below. scroll-page scroll-page └── index.html └── script.js └── style.css In the file, paste the code as below. Add long text and image so that, you will be able to scroll down into view. index.html 0 % scroll TOP About Website scroll Place long text here... < = > div class "scroll-bar" < = > div class "headline headline__text" < = > span id "scroll-percentage" </ > span </ > div </ > div < = = > div onclick "scrollToTop()" class "top_pos" </ > div < = > div class "wrapper" < = > h2 class "headline headline--margin-b-large" </ > h2 < = > p class "headline headline__text" < = = = /> img src "https://i.picsum.photos/id/1045/700/300.jpg?hmac=gWlSg2pLK_5xa7FmFKqyxI7S1nGeMCP8pJD9tnD-Y_0" alt "image" loading "lazy" </ > p </ > div Use to generate long text and for photos. lipsum.com picsum.photos In style.css, paste the below code to style HTML elements. { : ; : all ; } { : fixed; : ; : ; : ; : aqua; : black; : (-50%); : ; : ; : ; : ; } { : pointer; : fixed; : ; : ; : burlywood; : ; } img width 100% /* animate the image for 3s */ transition 3s /* for Scroll progress baar percentage. */ .scroll-bar position z-index 10 top 10px left 50% background-color color transform translateX padding-top 7px padding-bottom 7px padding-left 7px padding-right 7px /* for TOP display. */ .top_pos cursor position bottom 25px right 25px background-color 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 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. TOP When the above HTML element is clicked, it executes the Javascript function as define below: scrollToTop() { .scrollTo({ : , : , : }); } ( ) function scrollToTop window 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 property of the window object, we can also use other properties in the window as defined below. scrollTo , we need to implement a scroll position progress bar. Next In Javascript, we can listen to the scroll event listener so that, when the page scrolls, it can execute certain functions. .addEventListener( , handleScroll()); { } window 'scroll' ( ) 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. { timeout; { context = , args = ; later = { timeout = ; (!immediate) func.apply(context, args); }; callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); (callNow) func.apply(context, args); }; }; ( ) function debounce func, wait = , immediate=true 15 var return ( ) function var this arguments var ( ) function null if var if In the Javascript, rather than directly calling the function in the scroll event listener, we can wrap inside the function as below. handleScroll() debounce .addEventListener( , debounce(handleScroll), { : }); window 'scroll' passive true In the 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. handleScroll 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 function as below: handleScroll scroll_pos = .getElementById( ); handleScroll = { position = .pageYOffset; docHeight = ( .height !== ) ? .height - .outerHeight : .body.offsetHeight - .innerHeight; page_offset = ( .pageYOffset); scroll_value = .floor( (page_offset/docHeight) * ); (scroll_value > ) scroll_value = ; scroll_pos.innerText = scroll_value; }; // Reference for scroll display HTML element const document 'scroll-percentage' const => () const window // update scroll progress bar var document undefined document window document window let window let Math 100 if 100 100 // reveal image on scroll // uncomment the below line // reveal_img_scroll(page_offset + window.innerHeight) In the function, we have commented out the function. Uncomment this line. reveal_img_scroll function reveals the image when the screen is scroll into view of the image. handleScroll reveal_img_scroll 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. .addEventListener( , { .querySelectorAll( ).forEach( { img.style.opacity = ; }); handleScroll(); }); document "DOMContentLoaded" ( ) function event document 'img' ( ) function img "0.0" We can define the function as below. reveal_img_scroll { .querySelectorAll( ).forEach( { ( (img.offsetTop < scroll_page) && (img.style.opacity < ) ){ img.style.opacity = ; } }); } ( ) function reveal_img_scroll scroll_page document 'img' ( ) function img if 1 "1.0" Now scroll down into view of the image, the image will animate to 100% opacity. Thanks for reading 🤗 If you want to follow for more, check the link below. Personal website: taimoorsattar.dev Newsletter link → Twitter: @taimoorsattar7 Previously published at https://taimoorsattar.dev/blogs/scroll-javascript/
