Hướng dẫn tạo Button Back To Top cho blogspot

[blog]

Sau đây giaodienblog.net hướng dẫn các bạn tạo nút Back To Top quay lại đầu trang cho blogspot đơn giản, mục đích của button back to top là khi người dùng truy cập trang web của bạn họ kéo hết cuối trang muốn quay lại lên đầu trang chỉ cần nhấn chuột vô là sẽ lên đầu trang.

Thêm CSS cho blog của bạn đặt trước thẻ  đóng </head>:

<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-image: -webkit-linear-gradient(180deg,#35e486 0%,#22db86 54%,#0fd186 99%);
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}
</style>

Thêm đoạn script này trước thẻ đóng </body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
var mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

Như vậy là bạn đã tạo xong button Back To Top đơn giản rất là nhẹ. Các bạn có thể tùy chỉnh CSS theo ý thích.

Các bạn có thể xem demo ngay trên website của mình nhé.

Chúc bạn thành công!
[/blog]