Tạo nút back to Top - Lên đầu trang hiệu ứng trượt

Với nút Top lên đầu trang dễ dàng cho bạn trở về ngay trên đầu trang web, khi kéo thanh trượt duyệt web qua phần banner tiêu đề thì bạn sẽ bắt gặp chữ TOP hiện ra như trang của tôi, rất tiện lợi và đẹp mắt phải không các bạn. Để có hiệu ứng này, các bạn làm theo hướng dẫn sau:

Bước 1: Vào chỉnh sửa Template, chèn đoạn code sau vào trước thẻ đóng này </body>

Kiểu mũi tên lên (các bạn có thể tùy chỉnh hình khác hoặc chữ theo ý bạn):
<style type='text/css'> #bttop{border:0px solid #000;background:transparent;text-align:center;padding:5px;position:fixed;bottom:28px;right:15px;cursor:pointer;display:none;color:#000;font-size:11px;font-weight:900;} #bttop:hover{border:0px solid #000;background:transparent;} </style><br /> <div id='bttop'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagB6gBFeUi_8oE0dPV-PlPrz-C11fQWt4W4qQyZCxJf4IBM8egJuuGQkVJjoNchNoukSKhu4JJS8pIy6G7D-SX07aBAFDz3TpXPwKyngGK2nIRSUq7R6NXj1r1ScTbV3H4PDC2-2NFzg/s1600/Top.png' title='Top page'/></div><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></script><br /> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script><br />



Kiểu chữ TOP như trang của tôi (các bạn có thể tùy chỉnh hình khác hoặc chữ theo ý bạn):
<style type='text/css'> #bttop{border:0px solid #000;background:transparent;text-align:center;padding:5px;position:fixed;bottom:28px;right:15px;cursor:pointer;display:none;color:#000;font-size:11px;font-weight:900;} #bttop:hover{border:0px solid #000;background:transparent;} </style><br /> <div id='bttop'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhZWsIyipZcNT_Vu8tpYzVrd3XVWGY1pgGjD47U-XrNosHKxXo7ltr24FWlkSRXhXMJ6ohdWrG7v1ExmcE32AV4g73jYvsz29VuunD5D53-2ErukzlRLzZSbcPXD-kOelApBBiDJYUG5f/s1600/top.png' title='Top page'/></div><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></script><br /> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script><br />


Bước 2. Có thể xem trước hoặc lưu mẫu lại và xem thành quả.
Bonus: Bạn có thể vào đấy lấy link một số TOP cho bạn.

Please share it! :(