Прокрутите страницу вверх в ванильном JavaScript

PHP
1
2
3
<div class="up_scroll">
  <img src="<?=get_template_directory_uri();?>/img/up-arrow.svg" alt="up" width="32px" height="32px">
</div>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.up_scroll {
  position: fixed;
  background: #ff6610;
  width: 32px;
  height: 32px;
  bottom: 20px;
  right: 20px;
  visibility: hidden;
  cursor: pointer;
  z-index: 10;
}
.up_scroll img {
  padding: 5px;
}

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const scrollBtn = document.querySelector(".up_scroll");
const btnVisibility = () => {
    if (window.scrollY > 400) {
        scrollBtn.style.visibility = "visible";
    } else {
        scrollBtn.style.visibility = "hidden";
    }
};
document.addEventListener("scroll", () => {
    btnVisibility();
});
scrollBtn.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});