0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We saw how the onscroll event handler works. We can use it to track when a user scrolls down a page. Muffin wants the “Up” button to appear if the user has scrolled down by more than 200px. How can you determine how many pixels have been scrolled down the page?</p>
1
<p>We saw how the onscroll event handler works. We can use it to track when a user scrolls down a page. Muffin wants the “Up” button to appear if the user has scrolled down by more than 200px. How can you determine how many pixels have been scrolled down the page?</p>
2
<p>Use the pageYOffset property of the browser window. It contains the number of pixels by which the user has scrolled vertically down the page:</p>
2
<p>Use the pageYOffset property of the browser window. It contains the number of pixels by which the user has scrolled vertically down the page:</p>
3
// If we are at the very top of the page console.log(window.pageYOffset); // Outputs: 0 // Scroll down the page by 200px console.log(window.pageYOffset); // Outputs: 200<p>In order to show the “Up” button in time, we need to track the vertical scrolling value. Let’s see how it changes. To do this, tell JavaScript to output it to the console every time when the onscroll event is triggered.</p>
3
// If we are at the very top of the page console.log(window.pageYOffset); // Outputs: 0 // Scroll down the page by 200px console.log(window.pageYOffset); // Outputs: 200<p>In order to show the “Up” button in time, we need to track the vertical scrolling value. Let’s see how it changes. To do this, tell JavaScript to output it to the console every time when the onscroll event is triggered.</p>
4
<p>The horizontal scroll value is stored in the pageXOffset property.</p>
4
<p>The horizontal scroll value is stored in the pageXOffset property.</p>