- Vào Mẫu > Chỉnh sửa HTML, thêm bên trên </head> :
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
- Thêm đoạn css bên trên ]]></b:skin> :
.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s; } .smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s; } .smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px; } .smoothscroll-top i.fa { line-height:inherit; }
- Thêm đoạn code trước thẻ </body> :
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <script type='text/javascript'> //<![CDATA[ $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear'); } //]]> </script>
- Lưu mẫu lại và xem kết quả:
- Nếu bổ sung 1 chút đoạn code thêm trước thẻ </body> ta sẽ thấy trang hơi giật lại :
<div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <script type='text/javascript'> //<![CDATA[ $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50); } //]]> </script>
Tác giả: Arlina Fitriyani
Nguồn: http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html
Tags
Thủ Thuật Blogger