Back To Top công dụng của nó là giúp người đọc khi kéo xuống cuối bài viết để đọc, thay vì phải cuộn lên trên thì chỉ nhấn nút này là sẽ trở về đầu trang ngay lập tức
Được thiết kế bởi CSS và Javascript nên hiệu ứng cuộn rất mượt mà giúp blog trở nên dễ tuỳ biến hơn.
Tạo nút Back To Top cuộn mượt cho blogspot
Cách thêm nó vào blog như sau
Bước 1: Truy cập Blogger - Mẫu - Chỉnh sửa HTML đặt mã sau vào cặp thẻ <head>....</head>
1<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>Bước 2: Bạn tìm đến thẻ ]]></b:skin> và đặt CSS sau lên trên thẻ đó12345678910111213141516171819202122232425262728293031323334.smoothscroll-top {Bước 3: Bạn tìm đến thẻ </body> sau đó dán code sau lên trên thẻ đó
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;
}
123456789101112131415161718192021222324252627282930<div class="smoothscroll-top">Cuối cùng lưu mẫu lại và xem thế quả. Chúc bạn thành công !
<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>
Điểm 4.6/5 dựa vào 87 đánh giá
EmoticonEmoticon