Nút back to top đẹp từ CSS cho blog

Hôm nay mình sẽ giới thiệu với các bạn một mẫu back to top của tác giả ArlinaDesign, nút back to top này hoàn toàn từ CSS kèm hiệu ứng ẩn hiện bắt mắt. Bây giờ chúng ta cùng tìm hiểu cách làm.

Demo ngay trên bài viết này

#Thêm CSS

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin> 
4. Dán code dưới vào trên (trước) thẻ vừa tìm

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

1. Tìm thẻ </head>

2. Dán code dưới vào trên thẻ mà bạn vừa tìm

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Nếu trong template của bạn đã có sẵn code này rồi thì khỏi thêm vào nữa nhé.

#Thêm HTML và Javascript

1. Tìm thẻ </body>

2. Dán code dưới vào trên thẻ mà bạn vừa tìm

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

3. Lưu mẫu lại.

Như vậy là bạn đã hoàn thành việc thêm nút back to top vào blog của mình. Nếu có thắc mắc gì xin để lại một bình luận.
Chúc các bạn thành công!!!

ArlinaDesign