https://www.quandela.com/wp-content/themes/quandela/js/common/back-to-top.js

1// Tạo nút "Back to Top"
2const backToTopButton = document.createElement("button");
3backToTopButton.id = "back-to-top";
4backToTopButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"rgba(255,255,255,1)\"><path d=\"M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z\"></path></svg>"; // Mũi tên hướng lên
5backToTopButton.style.display = "none";
6document.body.appendChild(backToTopButton);
7
8// Thêm CSS cho nút
9const css = `
10  #back-to-top {
11    position: fixed;
12    bottom: 50px;
13    right: 30px;
14    width: 50px;
15    height: 50px;
16    background-color: var(--wp--preset--color--brand-blue);
17    color: #ffffff;
18    border: none;
19    border-radius: 50%;
20    box-shadow: 0px 0px 50px #293997;
21    cursor: pointer;
22    font-size: 24px;
23    text-align: center;
24    line-height: 50px;
25    z-index: 1000;
26    padding: 3px;
27  }
28  #back-to-top:hover {
29    background-color: #0056b3;
30    box-shadow: 0px 0px 50px #293997;
31  }
32`;
33const style = document.createElement("style");
34style.appendChild(document.createTextNode(css));
35document.head.appendChild(style);
36
37// Hàm cuộn lên đầu trang
38function scrollToTop() {
39    window.scrollTo({
40        top: 0,
41        behavior: "smooth"
42    });
43}
44
45// Hiển thị hoặc ẩn nút dựa trên vị trí cuộn
46function toggleBackToTopButton() {
47    if (window.scrollY > 300) {
48        backToTopButton.style.display = "block";
49    } else {
50        backToTopButton.style.display = "none";
51    }
52}
53
54// Thêm sự kiện
55window.addEventListener("scroll", toggleBackToTopButton);
56backToTopButton.addEventListener("click", scrollToTop);