When we browse the web, most of us have a one-click back to the top button, which is very common on both PC and mobile devices. I also requested handwriting during an interview.

First, create a new empty page and set the body height to 3000px. The purpose of this is to make the browser scroll bar, otherwise we would have to put a lot of content to prop up the page.

body {
    height: 3000px;
}
Copy the code

For the HTML section, we’ll write two divs, one for the flag bit, at the top of the browser, so that we can intuitively know when we’re at the top of the browser. The other div is the button that we go back to the top.

<div id="top">I'm at the top of the browser</div>
<div id="logo">Return to the top</div>
Copy the code

And the way they look

#logo {
    background-color: rgb(129.192.242);
    position: fixed;
    right: 20px;
    bottom: 20px;
    text-align: center;
    width: 90px;
    height: 90px;
    line-height: 90px;
    color: #fff;
    border-radius: 50%;
    display: none;
    cursor: pointer;
}
#logo:hover {
    background-color: rgb(45.150.233);
}
#top {
    text-align: center;
    width: 100%;
    background-color: #f3f3f3;
    padding: 20px 0;
}
Copy the code

In a real application scenario, the button must appear only when the scroll bar appears. In other words, the current position must not be at the top of the browser for the button to be meaningful, so we temporarily set its style to display: None to achieve a hidden effect.

Now it looks like this.

Now let’s start writing the core JS code.

var oDiv = document.getElementById('logo');
window.onscroll = function() {
    oDiv.style.display = 'block';
    var height = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(height);
    if(height == 0) {
        oDiv.style.display = 'none'; }}Copy the code

Let’s start by adding an event handler to the browser’s scroll event. The core thing we’re going to manipulate is the OnScroll property of the window.

If there is a scroll event, the first thing we need to do is make the button appear, which is to set its display property to block via JS to make it appear.

The next thing to do is get the distance between the current window and the top of the browser, because each browser has its own features, so we need to do compatibility.

Document. The documentElement. ScrollTop | | document. The body. The scrollTop basically can be compatible with all browsers.

If the current window is 0 away from the top, we are back to the top, so this button needs to be hidden, again with its display set to None.

The other core event is the click of this button.

oDiv.onclick = function() {
    var height = document.documentElement.scrollTop || document.body.scrollTop;
    var t = setInterval(() = > {
        height -= 50;
        if(height > 0) {
            window.scrollTo(0,height);
        }else {
            window.scrollTo(0.0);
            clearInterval(t); }},10);
}
Copy the code

Again, let’s get the height of the current window from the top.

To go back to the top, the window object still has a method that we can use, which is the scrollTo method. We can call this method and pass in the parameters to scroll the window to some coordinate. The first parameter is the X-axis, and the second parameter is the Y-axis. Our function mainly operates on its Y-axis, so we just pass in 0 for the first argument.

In this way, the function can be realized, but after testing, it is found that the time for it to return to the top is very fast, almost instantaneously, which is very bad for the user experience. So we write the scrollTo method that operates on the Window object into a setInterval timer that is called once in 10ms and scrolls 50 times each time.

As you can see from the renderings, we have now implemented all the back to the top functionality of a commercial website.

About smooth scrolling, if you don’t like to write your own timer. You can use API to achieve, you can check the MDN document, the system provides us with API to achieve smooth scrolling effect.

In other words, we can rewrite the content of the click event as

oDiv.onclick = function() {
    window.scrollTo({
        top:0.behavior:"smooth"})}Copy the code