0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<blockquote><p>Meow! This page is far too long to scroll through. Let’s make an “Up” button!</p>
1
<blockquote><p>Meow! This page is far too long to scroll through. Let’s make an “Up” button!</p>
2
</blockquote><p>The main page of the news site that we worked on in <a>previous chapters</a>is very long. If the user has read through all of the news stories and wants to return to the beginning, then it will take them a while to scroll back up. Muffin wants us to program a button that will automatically scroll the page back to the top.</p>
2
</blockquote><p>The main page of the news site that we worked on in <a>previous chapters</a>is very long. If the user has read through all of the news stories and wants to return to the beginning, then it will take them a while to scroll back up. Muffin wants us to program a button that will automatically scroll the page back to the top.</p>
3
<p>The button is initially not visible, and it should appear if the user has scrolled the page by more than 200px.<i>Why is the number 200 important? Only the cat knows why!</i>If the button is clicked, the page should scroll to the beginning, and the button itself should disappear after that.</p>
3
<p>The button is initially not visible, and it should appear if the user has scrolled the page by more than 200px.<i>Why is the number 200 important? Only the cat knows why!</i>If the button is clicked, the page should scroll to the beginning, and the button itself should disappear after that.</p>
4
<p>In order to carry out the boss’ assignment, we need to know when the user is scrolling the page. JavaScript monitors everything that happens in the browser window, including scrolling. We can tell it what to do if the page is scrolled. To do this, let’s use the onscroll event handler. It is activated every time a page is scrolled, even if the page is moved by just one pixel.</p>
4
<p>In order to carry out the boss’ assignment, we need to know when the user is scrolling the page. JavaScript monitors everything that happens in the browser window, including scrolling. We can tell it what to do if the page is scrolled. To do this, let’s use the onscroll event handler. It is activated every time a page is scrolled, even if the page is moved by just one pixel.</p>
5
<p>In order to track scrolling on the news site, let’s add an event handler to the mini-browser window. The browser window (or tab) is indicated in JavaScript using the word window:</p>
5
<p>In order to track scrolling on the news site, let’s add an event handler to the mini-browser window. The browser window (or tab) is indicated in JavaScript using the word window:</p>
6
window.onscroll = function () { console.log('The page has been scrolled'); }<p>Let’s check how the onscroll handler works.</p>
6
window.onscroll = function () { console.log('The page has been scrolled'); }<p>Let’s check how the onscroll handler works.</p>
7
<p>You can add the onscroll event handler not only to the browser window, but also to separate elements on the page. For the event handler to work, the element must have its own scrollbar. You can control the scrolling of the element using the<a>overflow</a>CSS property.</p>
7
<p>You can add the onscroll event handler not only to the browser window, but also to separate elements on the page. For the event handler to work, the element must have its own scrollbar. You can control the scrolling of the element using the<a>overflow</a>CSS property.</p>