Một số kiểu nút back to top - Scroll to top

Đôi khi trên blog của bạn có những bài viết rất dài hay có rất nhiều bình luận thì khi khách đọc xong sẽ mất nhiều thời gian để lên đầu trang. Để khắc phục thình trạng đó mình giới thiệu với các bạn một số kiểu nút back to top hay gặp.

Sử dụng css

1. Đăng nhập vào blog> "Mẫu"> "Chỉnh sửa HTML"
2. Chèn code dưới vào phía trên thẻ </body> 

<div id="topcontrol" title="Scroll to Top" style="position: fixed; bottom: 5px; right: 5px; opacity: 1; cursor: pointer;"><img src="./Free Scroll to Top Buttons_files/arrow37.png"></div>

Thay đoạn màu đỏ thành liên kết tới hình ảnh bạn thích, có thể vào đây để chọn một số icon.
Bạn có thể vào trang scrolltotop.com chọn một mẫu bạn thích rồi dán vào trên thẻ </body>

Sử dụng jquery

Sử dụng jquery giúp bạn có được một hiệu ứng trượt mượt mà và nut back to top này sẽ ẩn khi lên top
Chèn đoạn bên dưới phía trên thẻ </body>

• Kiểu 1 (DEMO)

<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>

Thay BACK TO TOP thành đoạn bạn thích

• Kiểu 2 (DEMO) 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

 // hide #back-top first
 $("#back-top").hide();
 
 // fade in #back-top
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });

  // scroll body to 0px on click
  $('#back-top a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 800);
   return false;
  });
 });

});
</script>