0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We have learned how to determine the amount of vertical scrolling. If the user has scrolled down by more than 200px, then the “Up” button should appear on the page. In the markup, this is an element with the class up-button:</p>
1
<p>We have learned how to determine the amount of vertical scrolling. If the user has scrolled down by more than 200px, then the “Up” button should appear on the page. In the markup, this is an element with the class up-button:</p>
2
<button class="up-button" type="button"> ↑ <span class="visually-hidden">Up</span> </button><p>This is how the button will look in the browser:</p>
2
<button class="up-button" type="button"> ↑ <span class="visually-hidden">Up</span> </button><p>This is how the button will look in the browser:</p>
3
<p>Find the button using the querySelector method and write it to a variable.</p>
3
<p>Find the button using the querySelector method and write it to a variable.</p>
4
<p>Initially, the button is not visible, and it should appear if the user scrolls down the page by more than 200px. In order to determine whether the button should be shown, add the onscroll conditional statement to the inside the event handler, and use<a>the greater than comparison operator</a>to compare the scroll value with the number 200:</p>
4
<p>Initially, the button is not visible, and it should appear if the user scrolls down the page by more than 200px. In order to determine whether the button should be shown, add the onscroll conditional statement to the inside the event handler, and use<a>the greater than comparison operator</a>to compare the scroll value with the number 200:</p>
5
if (window.pageYOffset > 200) { // If the condition is true, then show the button }<p>In order for the button to appear, you need<a>to add the</a>shown class to it. Use the classList.add method to accomplish this. Then scroll down the page and make sure that the “Up” button appears.</p>
5
if (window.pageYOffset > 200) { // If the condition is true, then show the button }<p>In order for the button to appear, you need<a>to add the</a>shown class to it. Use the classList.add method to accomplish this. Then scroll down the page and make sure that the “Up” button appears.</p>