Simple Scroll to Top
Hôm nay có ít thời gian rảnh mình chia sẻ một thủ thuật nhỏ mà hầu hết mọi người đều sử dụng đó là tạo nút Back to Top. Thủ thuật không mới và cũng không có gì đặc biệt nhưng đây là mẫu mình thấy đơn giản và dễ sử dụng nhất, hơn thế nữa không hề sử dụng hình ảnh chèn ngoài tất cả đều sử dụng css nên rất tối ưu cho blog của bạn. Các bạn có thể xem Demo ngay tại trang blog của mình.
Thực hiện: Tìm đến thẻ đóng </body> và thêm vào ngay trước nó đoạn mã.
<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:#bc1dd3;border:1px solid #9600ac}
</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>
Ok thủ thuật đã hoàn thành!
Post a Comment