Tạo nút Back To Top cuộn mượt cho blogspot

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.[post_ad]

Demo bạn có thể xem ngay tại blog của mình đó :) Nếu bạn muốn thay đổi biểu tượng thì xem bài viết này.

Xem thêm:

- Hướng dẫn tạo popup like facebook ở góc cho blogspot

- Tạo recent comments widget đẹp cho blogspot

- Thêm hiệu ứng lá vàng rơi cho blogspot

huhu

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>

<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ẻ đó

.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;
}

Bước 3: Bạn tìm đến thẻ </body> sau đó dán code sau lên trên thẻ đó

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

Cuối cùng lưu mẫu lại và xem thế quả. Chúc bạn thành công !
Xem nhiều thủ thuật hơn tại Star Trường Blog nhé ^^

Download Here