Tạo nút Back to Top với hiệu ứng từ jQuery

625-backtotoppng


Đoạn code chèn vào website tạo nút back to TOP (lên đầu trang) với hiệu ứng mượt mà của Jquery

Rất đơn giản, chỉ cần các bạn chèn đoạn code sau trong thẻ HEAD là được

<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://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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>



Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *