[Blogspot] Tạo nút Back To Top kiểu mới tuyệt đẹp cho blogger

Back To Top là 1 điểm rất hay của mỗi blog. Nhờ nó mà ta không cần phải dùng thanh cuộn dọc (scrollbar) để kéo lên tít tận đầu blog, vừa mệt và đôi khi gây cả sự khó chịu cho người đọc đối với 1 bài viết quá dài.

Tình cờ hôm trước có ghé qua 1 blog nước ngoài thấy cái button này khá đẹp, nó có hiệu ứng khi càng kéo xuống dưới nó sẽ lấp đầy button theo tỉ lệ phần trăm (%) giống thanh cuộn scrollbar hiệu ứng hiện % ấy.
Đẹp quá nên mình quyết định view source ra vì chưa thấy chủ blog đó share nữa. Hôm nay đem chia sẻ cho các bạn :)

Button Back To Top hiệu ứng phần trăm tuyệt đẹp

Để dễ hình dung hơn thì các bạn có thể coi demo tại đây.

Demo Click here

Cách thức hiện:

Bước 1: Truy cập quản trị Blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Bạn hãy chèn thư viện jquery và font-awesome bên dưới vào sau thẻ <head>. (Nếu như template của bạn đã có sẵn rồi thì bỏ qua bước này)

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" id="fontawesome" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Bước 3: Chèn đoạn CSS dưới đây trước thẻ ]]></b:skin>.

/* -------- go to Top -------- */
.goTop {position:fixed; right:20px; bottom:-10px; display:none;}
#goTop {
width:50px; height:50px;
background:rgba(0,0,0,0);
border-radius:50%;
text-align:center;
line-height:50px;
font-size:30px;
color:#fff;
display:block;
overflow:hidden;
position:relative;
box-shadow:0 3px 1px rgba(0, 0, 0, 0.3)
}
#goTopBackground {
position:absolute; left:-10%; top:100%;
width:120%; height:120%;
background:#16a085;
}

Bước 4: Tiếp tục chèn đoạn Js bên dưới trước thẻ </body>.

<script type='text/javascript'>
   //<![CDATA[
  // Scrolling within page, Scroll to Top
 $('a.internal-link').click(function(e){
      $('html,body').animate({scrollTop:$(this.hash).offset().top}, 900);
      e.preventDefault();
 });

  placegoTopBackground();
  $(window).scroll(function(){
    ($(window).scrollTop()>100)?
      $('.goTop').stop().css('display','block').animate({'bottom':'20px'},100) :
      $('.goTop').stop().animate({'bottom':'-10px'},100,function(){ $(this).css('display','none'); });
    placegoTopBackground();
  });

  function placegoTopBackground(){
    var d=$(document).height(), c=$(window).height(), s=$(window).scrollTop();
    var position=(1-(s/(d-c)))*100;
    $('#goTopBackground').css('top', position+'%');
  }
//hide and show
function hideandshow(i){
  var elem = $('#' + i);
  elem.is(':hidden')?elem.slideDown(300):elem.slideUp(300);
  return false;
}
//]]>
</script>

Bước 5: Cuối cùng là chèn đoạn hiển thị button vào sau thẻ <body>. (Có nhiều template thì thẻ <body> đã thay đổi cấu trúc, nếu không tìm được thì bạn hãy chỉ tìm <body thôi là nó ra)

<!-- go to Top -->
<span id='Top'/>
<div class='goTop hide-for-small-screen'>
<a class='internal-link' href='#Top' id='goTop'>
<span id='goTopBackground'></span><i class='fa fa-angle-up'></i>
</a>
</div>

Vậy là xong rồi đó!

Thực sự rất cảm ơn bạn Iris đã giúp mình giải quyết vấn đề "hiệu ứng trượt của button" vì nếu không có hiệu ứng đó thì sẽ không hoàn hảo và trông tệ hại lắm khi nó trôi tuột phát lên top luôn :))

#Blogspot #Thủ thuật

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

[Blogspot] Tạo nút Back To Top kiểu mới tuyệt đẹp cho blogger

TSM Blogger

Bài viết cùng chuyên mục

2 bình luận Tổng hợp bình luận