Tạo nút back to top hiệu ứng tuyệt đẹp cho blogger

Chào các bạn, nút back to top là một nút được coi như không thể thiếu cho Blog hay một trang website nào đó, nếu nó ngắn thì không nói chứ nó dài thì hơi phiền. Trong hôm nay mình xin được hướng dẩn các bạn cách thêm Nút Back To Top vào blogspot, cùng bắt đầu nào!

Cái Nút này về căn bản là không phải do mình viết :3 , mà là mình lụm đại trên mạng và mang về Hướng dẩn cho các bạn nào đang có nhu cầu, kaka!

Thêm nút trở về đầu trang vào Blogger

Đầu tiên nói thêm một ít là nút trở đầu trang này sử dụng Font Awesome để tạo nên cho nó đẹp.
Bước 1: Thêm Đoạn Này Vào trên </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Bước 2: Các bạn chèn đoạn css sau lê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;
}

trong đoạn css này có các phần để giới hạn vị trí của nút trở về đầu trang, bạn có thể tự chỉnh lại cho chính xác vị trí mà bạn thích nhé.
Bước 3: bây giờ có 2 kiểu trượt về cho bạn lựa chọn, bạn hãy chèn chúng lên trên thẻ </body> nhé:
Hiệu ứng 1 :Trượt lên đỉnh một cách bình thường không có hiệu ứng gì thê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');
}
//]]>
</script>

 Hiệu ứng 2: Trượt lên đỉnh và nó nảy lên xuống khi chạm đầu trang

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

Lời Kết 

Okey, như vậy là mình vừa hướng dẩn các bạn cách thêm nút Back to top vào blog,:p hi vọng các bạn sẽ thích nó!
Chúc Các Bạn Thành Công!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait