Hôm nay xin giới thiệu với các bạn tiện ích Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang.
CÁCH THỰC HIỆN :
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn code sau trước thẻ </head> (nếu có rồi thì khỏi chèn tránh xung đột)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Bước 3: Chèn code sau trước thẻ </body>
<style type='text/css'>
#bttop{position:fixed;bottom:30px;right:30px;cursor:pointer;display:none;z-index:9999}
#top-arrow{display:block;width:41px;height:40px;background:#111;border:1px solid #000;border-radius:50%;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
#top-arrow::after{content:"";width:0;height:0;position:absolute;top:0;right:13px;border-color:transparent transparent #f1f1f1;border-style:solid;border-width:13px 8px}
#top-arrow:hover{background:#1295C9;border:1px solid #FFFFFF}
</style>
<div id='bttop'><a href='javascript:void(0);' id='top-arrow' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' title='Back-to-Top'/></div>
<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>
CHÚC CÁC BẠN THÀNH CÔNG.
