Nút Back To Top cho blog
Đối với blog có nhiều bài viết mà nội dung bài viết lại quá dài thì việc trở về đầu trang là 1 vấn đề hok nhỏ tí nào. Cũng chính vì lý do đó mà nút Back To Top đã ra đời. Bài viết sau sẽ giúp bạn có được một nút bấm tương tự như vậy.
Bạn chèn đoạn code dưới đây vào sau thẻ </body>
<style type='text/css'>Chữ Back To Top có thể thay thế bằng chữ khác tùy ý bạn. Hoặc bạn cũng có thể chèn 1 nút bấm dạng hình ảnh vào đó bằng đoạn code sau.
#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>
<img alt="" src="link file ảnh" />
No comments:
Post a Comment