Nút(Button) "Back to Top" cho Blog

Đối với blog có nội dung bài viết lại quá dài thì việc trở về đầu trang là 1 vấn đề đáng để quan tâm. Cũng chính vì lý do đó mà nút Back To Top đã ra đời. 

DEMO

Xem tại M21love.

HƯỚNG DẪN

BƯỚC 1: Vào phần chỉnh sửa HTML -> Ctrl + F -> Tìm thẻ </body> -> Thêm vào trước nó đoạn code sau:

<style type='text/css'> #bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;} #bttop:hover{border:1px solid #ffa789;background:#ff6734;} </style> <div id='bttop'> BACK TO TOP</div> <script src='http://voquocan.googlecode.com/files/jquery.min.js' type='text/javascript'></script> <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>

LƯU Ý

- Thay đổi " BACK TO TOP" thành tên bạn muốn hiển thị

- Nếu muốn đổi nó thành hình ảnh thì thêm đoạn code này thay cho chữ "Back to top"

<img alt="" src="link file ảnh" />

- Sau một thời gian thử nghiệm, Kiểu này có chút xung đột jQuery với các phần khác. Nếu bạn dùng không bị xung đột thì tốt. Có nhiều kiểu khác cho bạn chọn mà.