# 
## Overview
Have you ever clicked a button on a web application that automatically takes you to the top page?

In this shot, we will look at how to implement a scroll to the top button of a webpage easily and smoothly using the JavaScript `window.scrollTo()` method.

# 
#  What is `window.scrollTo()`?

**`window.scrollTo()`** is a `window` object method that scrolls to a particular set of coordinates in a web page or document.

##
## Syntax

---
``` css 
window.scrollTo(x-axis, y-axiz)
 // OR
window.scrollTo(options)
```
---

The `x-axis` and `y-axis` here represent the horizontal and vertical coordinate values of the document.

See the example below.

---
``` css
window.scrollTo(0, 500);
```
---

The code above will cause the document to scroll `0px` away from its `x-axis` (horizontal direction) and `500px` from its `y-axis` (vertical direction).

**`options`** in the syntax above is an object that has values for which to scroll and the behavior when it scrolls.

See the example below.

---
``` css
window.scrollTo({
 top: 20,
 left: 20,
 behavior: "instant"
})
```
---

# 
#  Parameters

The parameters it takes when you only pass the `x-axis` and `y-axis` are a set of numbers that represent the number of pixels away it should be from the `0 axis` of `x` and `y`. 

See the example of the first syntax above.

With the options, we can have properties such as the `top` and `left` or just one together with the `behavior` property. 

It is the `behavior` property that we can use to implement a smooth scroll.

##
## Code

Let's take a look at how to scroll to the top page of a web page using `window.scrollTo()` with the `options` parameter.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>window.scrollTo()</title>
  </head>
  <body>
    <h1>This is the head</h1>
    <p>Scroll down and click on the "scroll to top" button</p>
    <section style="height: 900px">This is a section</section>
    <section style="height: 900px">This is a section</section>
    <button id="scroll">Scroll To Top</button>

    <script>
      document.getElementById("scroll").addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      });
    </script>
  </body>
</html>


codemirror

# 
## Explanation

The smooth scroll above was implemented using the JavaScript code below.

document.getElementById("scroll").addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
});

With `behavior` property set to `smooth` and `top` set to `0`, we were able to implement a smooth scroll to the top page.

How to use window.scrollTo in HTML

JavaScript's `window.scrollTo()` method scrolls a document to specified coordinates, enabling smooth scrolling with options like `behavior: "smooth"`.

How to use window.scrollTo in HTML

Overview

What is window.scrollTo()?

Syntax

Parameters

Code

Explanation

What is `window.scrollTo()`?