HTML Academy
Show the “Up” button
Scrolling and operators4/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
Scroll page on click
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The scrollTo method

We told JavaScript to show the arrow button if it scrolls more than 200px. When you click this button, the page should scroll back to the beginning. This is not happening yet. How can we make the page scroll?

Use the scrollTo method:

window.scrollTo(X coordinate, Y coordinate)

The X coordinate indicates where we need to scroll the page to in the horizontal direction, and the Y coordinate specifies the value for the vertical direction. When the browser executes an instruction, the indicated point is displayed in the upper left corner of the window. The coordinates are entered in pixels, but there is no need to specify the units of measurement:

// Scrolls the page by 100px to the right and by 50px down
window.scrollTo(100, 50);
How window.scrollTo(100, 50) works

If it is not possible to scroll the page to the specified coordinates, the browser will scroll the page as far as it can, but it will not enlarge the page. If the page is able to fit in the entire window and there is no scrollbar, then the browser will ignore this instruction.

There is no horizontal scroll bar on the news site that we are working on. Therefore, we will write 0 as the X coordinate, and we will only change the Y coordinate.

Let’s investigate how the scrollTo method works: Tell JavaScript to first scroll 400px down the page and then to scroll back up to the beginning.

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; }
    let upButton = document.querySelector('.up-button'); window.onscroll = function () { if (window.pageYOffset > 200) { upButton.classList.add('shown'); } }; // Add an instruction here
    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 9, add an instruction that will scroll the page vertically by 400 pixels: window.scrollTo(0, 400);.
        Notice how the page scrolls.
      2. Change the scroll coordinates to 0, 0.
        Notice how the page scrolls back 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.