HTML Academy
The pageYOffset property
Scrolling and operators3/15
Back to the list of tasks
  • 1. The onscroll event handler
  • 2. The pageYOffset property
  • 3. Show the “Up” button
  • 4. The scrollTo method
  • 5. Scroll page on click
  • 6. Finish working on the “Up” button
  • 7. Start filtering on the site
  • 8. Strict equality operator
  • 9. The onchange event handler
  • 10. Add a class to news story from the selected category
  • 11. Strict inequality operator
  • 12. Showing news from a selected category
  • 13. The logical operator AND
  • 14. Summary of “Scrolling and operators”
  • 15. Test: Rate the site
The scrollTo method
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Show the “Up” button

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:

<button class="up-button" type="button">
  ↑
  <span class="visually-hidden">Up</span>
</button>

This is how the button will look in the browser:

Find the button using the querySelector method and write it to a variable.

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 the greater than comparison operator to compare the scroll value with the number 200:

if (window.pageYOffset > 200) {
  // If the condition is true, then show the button
}

In order for the button to appear, you need to add theshown class to it. Use the classList.add method to accomplish this. Then scroll down the page and make sure that the “Up” button appears.

Comments

Files
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <a class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo"> </a> <a href="subscription.html" class="subscription-link">Subscription</a> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="index-main"> <div class="container"> <h1 class="visually-hidden">FlashNews news portal!</h1> <div class="news-view"> <button class="row-view view-checked" type="button">Results list</button> <button class="tile-view" type="button">Tile</button> </div> <section class="news-list"> <h2 class="visually-hidden">All News</h2> <article class="news-block" data-category="cats"> <img src="img/news-cat.jpg" alt="Cat eyes"> <div class="news-block-text"> <h3>Unique video!</h3> <p>Discover the World Through the Eyes of Cats! Your life will never be the same…</p> <span class="news-tag">#Kitties</span> <time datetime="2020-03-24">March 24, 2020</time> </div> </article> <article class="news-block" data-category="HR"> <img src="img/walk.jpg" alt="People go for walks"> <div class="news-block-text"> <h3>It can be healthy to go for a walk</h3> <p>But it might not be if you take a stroll with the wrong people…</p> <span class="news-tag">#HR</span> <time datetime="2020-03-19">February 19, 2020</time> </div> </article> <article class="news-block" data-category="games"> <img src="img/ar.jpg" alt="Person wearing virtual reality glasses"> <div class="news-block-text"> <h3>Augment your reality</h3> <p>The editors of Flashnews! have prepared a gift for their subscribers…</p> <span class="news-tag">#Games</span> <time datetime="2020-02-18">February 18, 2020</time> </div> </article> <article class="news-block" data-category="IT"> <img src="img/drone.jpg" alt="A small drone"> <div class="news-block-text"> <h3>Dronovirus</h3> <p>The designers at the DogDrones.inc laboratory have assured that their drones cannot be carriers of dangerous viruses…</p> <span class="news-tag">#IT</span> <time datetime="2019-12-22">December 22, 2019</time> </div> </article> <article class="news-block" data-category="HR"> <img src="img/new-research.jpg" alt="A man looks at a board with cards"> <div class="news-block-text"> <h3>From the world of psychology</h3> <p>Studies show that if you do more, you can actually get more done.</p> <span class="news-tag">#HR</span> <time datetime="2019-10-12">October 12, 2019</time> </div> </article> <article class="news-block" data-category="games"> <img src="img/new-drone.jpg" alt="Quadcopter"> <div class="news-block-text"> <h3>A quadcopter is not just a fancy toy</h3> <p>Controlling the quadcopter allows you to develop agility, spatial thinking, and the ability to climb trees… </p> <span class="news-tag">#Games</span> <time datetime="2019-11-21">November 21, 2019</time> </div> </article> <article class="news-block" data-category="IT"> <img src="img/new-loop.jpg" alt="Infinite loops"> <div class="news-block-text"> <h3>Infinite loops: It’s time to end them</h3> <p>British scientists have discovered that the ability of software to function directly depends on the presence of infinite loops in it.</p> <span class="news-tag">#IT</span> <time datetime="2019-10-16">October 16, 2019</time> </div> </article> <article class="news-block" data-category="cats"> <img src="img/news-robot2.jpg" alt="A robot vacationing at a resort"> <div class="news-block-text"> <h3>What shocking news! It’s so scandalous! Such a sensation!</h3> <p>It turns out that you don’t have to be a cat to start programming in JavaScript!</p> <span class="news-tag">#Kitties</span> <time datetime="2019-12-22">December 22, 2019</time> </div> </article> <article class="news-block" data-category="IT"> <img src="img/new-graph.jpg" alt="New library"> <div class="news-block-text"> <h3>New graphics library</h3> <p>Now you can create a dashboard in just a matter of seconds.</p> <span class="news-tag">#IT</span> <time datetime="2019-10-14">October 14, 2019</time> </div> </article> <article class="news-block" data-category="cats"> <img src="img/new-cat.jpg" alt="Cat at a laptop"> <div class="news-block-text"> <h3>This just in: SHOCKING NEWS! Secret photos from the cat nursery</h3> <p>No one expected that THIS was going on behind the closed doors…</p> <span class="news-tag">#Kitties</span> <time datetime="2019-10-13">October 13, 2019</time> </div> </article> </section> </div> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <a class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </a> </div> </footer> <button class="up-button" type="button"> ↑ <span class="visually-hidden">Up</span> </button> <script src="script.js"></script> <script src="themes.js"></script> <script src="up-button.js"></script> </body> </html>
    html { scroll-behavior: smooth; } .hidden { display: none; } .subscription-link { position: relative; padding-top: 8px; padding-right: 2px; padding-bottom: 6px; padding-left: 26px; margin: auto 4%; } .subscription-link::before { position: absolute; content: ""; width: 18px; height: 12px; top: 9px; left: 2px; } .subscription-link:hover { padding-bottom: 4px; border-bottom: 2px solid; } .subscription-link:active { opacity: 0.6; } .light-theme .subscription-link { color: #6653d9; outline-color: #b6aaff; } .light-theme .subscription-link:hover { border-color: #6653d9; } .light-theme .subscription-link::before { background-image: url("img/letter-light.svg"); } .dark-theme .subscription-link { color: #9484f2; outline-color: #6653d9; } .dark-theme .subscription-link:hover { border-color: #9484f2; } .dark-theme .subscription-link::before { background-image: url("img/letter-dark.svg"); } .up-button { position: fixed; z-index: 1; padding: 0; bottom: 75px; right: 20px; width: 64px; height: 64px; font-size: 36px; font-weight: bold; text-align: center; vertical-align: middle; border: 5px solid; border-radius: 50%; display: none; cursor: pointer; } .light-theme .up-button { color: #6653d9; background-color: rgba(255, 255, 255, 0.8); border-color: #6653d9; outline-color: #b6aaff; } .light-theme .up-button:hover { color: #473c8d; background-color: rgba(255, 255, 255, 0.8); border-color: #473c8d; } .dark-theme .up-button { color: #9484f2; background-color: rgba(10, 9, 16, 0.6); border-color: #9484f2; outline-color: #6653d9; } .dark-theme .up-button:hover { color: #6653d9; background-color: rgba(10, 9, 16, 0.6); border-color: #6653d9; } .shown { display: inline-block; } /* News tags styles */ .news-tag { padding: 4px 8px; margin: 0 auto 0 0; border-radius: 12px; } .list-tiles-view .news-tag { margin-bottom: 4px; } .light-theme .news-tag { color: #aaaaaa; background-color: #f2f2f2; } .dark-theme .news-tag { color: #888888; background-color: #0a0910; }
    // Declare a variable here window.onscroll = function () { console.log(window.pageYOffset); };
    let rowViewButton = document.querySelector('.row-view'); let tileViewButton = document.querySelector('.tile-view'); let newsList = document.querySelector('.news-list'); rowViewButton.onclick = function () { rowViewButton.classList.add('view-checked'); tileViewButton.classList.remove('view-checked'); newsList.classList.remove('list-tiles-view'); }; tileViewButton.onclick = function () { rowViewButton.classList.remove('view-checked'); tileViewButton.classList.add('view-checked'); newsList.classList.add('list-tiles-view'); };
    let page = document.querySelector('.page'); let themeButton = document.querySelector('.theme-button'); themeButton.onclick = function () { page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); };

    What didn’t you like in this task?

    Thanks! We’ll fix everything at once!

    The code has changed, click “Refresh” or turn autorun on.

    You’ve gone to a different page

    Click inside the mini-browser to shift the focus onto this window.

    100%
    Console
    Goalscompleted
    0
      1. On line 1, declare a variable upButton and write an element to it with the class up-button.
      2. Add a conditional statement inside the event handler to replace the console output. Specify window.pageYOffset > 200 as a condition.
      3. If the condition is true, the shown class must be added to the upButton element.
      4. Scroll down the page in the mini-browser to make the arrow button appear. Click this button. Please note how the page does not scroll to the beginning.

      Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

      VISAMastercard

      Log in

      or

      Forgot your password?

      Sign up

      Sign up

      or
      Log in

      Restore access

      Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

      Forgot to connect your email to the profile? Email us and we’ll help.