Nút Back To Top (Trở về đầu trang) với hiệu ứng đơn giản cho Blogger

Tiện ích nút Back To Top rất có ích cho độc giả blog của bạn ở những bài viết dài vì có thể dễ dàng tiết kiệm thời gian cho việc mất công phải kéo thanh cuộn lên đầu trang.

Đây là một nút Back To Top mình mới chế xin chia sẻ lại với các bạn, nó có hiệu ứng lên đầu trang rất đơn giản, click một cái là vèo phát lên đầu trang, không được mượt mà cho lắm vì không có jQuery nhưng bù lại nó sẽ ít ảnh hưởng đến tốc độ tải trang của bạn.

Xem Demo

Bạn hãy click vào nút phía trên để xem Demo nhé!

Các bước tạo nút Back To Top

Bước 1: Các bạn vào chế độ chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS sau:

/* Back To Top by Nguyen Phuc - NvPN Blog - nvpn.blogspot.com */
#backtotop {height: auto;width: auto;position: fixed;bottom: 15px;right: 20px;background-color:#A5D16D;margin:0;padding:15px;border-radius:10px;border-bottom:4px solid #78994e;}
#backtotop:hover{background-color:#90b85c;border-bottom:2px solid #78994e;}

Bước 2: Tìm thẻ đóng và thêm vào trước nó đoạn JS bên dưới:

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var appended = false, top = document.createElement("a");
top.href = "#";
top.id = "backtotop";
top.innerHTML = "<img alt='Trở về đầu trang' src='https://lh4.googleusercontent.com/-X1mHEtLHLI0/VHrVmLm9D4I/AAAAAAAA5sw/3h4z4t1pRBo/s0/backtotop-nvpnblog.png'/>";

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
    if (!appended) {
      document.body.appendChild(top);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(top);
      appended = false;
    }
  }
};
}
//]]></script>

Vậy là xong!