Chia sẻ tốt

Blog chia sẻ tốt, chia sẻ nội dung hay cho nhiều người biết.

30/12/15

Home » » Tạo nút BACK TO TOP cho Website

Tạo nút BACK TO TOP cho Website

By No comments
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 đầu trang.
Nút BACK TO TOP sẽ xuất hiện khi nội dung trang quá dài.
Có rất nhiều code Javascript và JQuery tạo nút BACK TO TOP nhưng trong bài viết này mình xin giới thiệu một đoạn code bạn có thể tùy chỉnh CSS đơn nhưng mà hiệu quả cao.


Code tạo nút lên đầu trang Top cho website. Chèn trên thẻ </body>
<!-- BACK TO TOP -->
<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 type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#39;#bttop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800);});});</script>
<!-- BACK TO TOP Ends -->
Lưu ý:
Đôi khi sẽ đụng với Javascript khác vì vậy đoạn
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Bạn có thể sắp xếp cho nó nằm dưới  thẻ <head>

Như vậy là xong rồi, và thưởng thức thành quả của mình thôi.
Thanh Hoài - hoaisg1986@gmail.com
Share:  Facebook Twitter Google+

0 nhận xét:

Đăng nhận xét

 
BACK TO TOP