Tạo nút back top cực dễ không cần plugin cho website

Tạo nút back top không cần plugin cho website wordpress, xenforo, html 5,...Code chỉ vài dòng gồm HTML, css, và script áp dụng cho mọi thể loại website. Với nút back to top cho web này bạn sẽ giúp nâng cao trải nghiệm người dùng trên web. Nó tuy nhỏ nhưng đầy tính trải nghiệm cao với khách.

Nút back to top giúp khách nhanh chóng quay trở lại đầu trang bằng 1 nút bấm có icon xinh sắn ( demo như hình dưới ). Rồi bây giờ chúng ta vào việc tạo nút back top nhé.

Hướng dẫn tạo nút back top

Đầu tiên hãy mở file footer của wordpress hoặc xenforo. Chèn đoạn code bên dưới vào và lưu lại. Sau đó về trang chủ website của bạn. Bấm F5 và tận hưởng. Đơn giản vậy thôi à.

HTML:

<div class='back-to-top' id='back-to-top' title='Back to top'><span>&#8593;</span></div>
<style>
// css example
span {
  content: "\2191";
}
.back-to-top {
  visibility: hidden;
  background-color: #cacaca;
  color: #fff;
  width: 42px;
  height: 42px;
  text-align: center;
  line-height: 38px;
  position: fixed;
  bottom: 60px;
  right: 10px;
  z-index: 90;
  cursor: pointer;
  opacity: 0;
  border-radius: 3px;
  -webkit-transform: translateZ(0);
  transition: all .4s
}
.back-to-top .fa {
  font-size: 22px;
  vertical-align: middle
}
.back-to-top:hover {
  background-color: #2ecc71;
  color: #fff;
  opacity: 1;
}
.back-to-top.show {
  visibility: visible;
  opacity: 1;
}
</style>
<script>
// Back to top button
(function() {
  $(document).ready(function() {
    return $(window).scroll(function() {
      return $(window).scrollTop() > 600 ? $("#back-to-top").addClass("show") : $("#back-to-top").removeClass("show")
    }), $("#back-to-top").click(function() {
      return $("html,body").animate({
        scrollTop: "0"
      })
    })
  })
}).call(this);
</script>