Tạo nút truợt về đầu trang cho Blogger ( Blogspot )

BloggerGuide

Friday, November 6, 2015

0 comments

Tạo nút truợt về đầu trang cho Blogger ( Blogspot ) sử dụng Javascript đơn giản không sử dụng Query. 

#Blog Design » Tạo nút truợt về đầu trang cho Blogger ( Blogspot )

Bước 1: Bạn cần Đăng nhập Blogger DashBorad > Chỉnh sửa HTML của template

và chèn đoạn mã này lên trên thẻ </head>:

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

rồi sau khi chèn xong là tích hợp xong Font Awesome vào Blogger.

Bước 2: Tiếp tục bạn chèn đoạn css sau đây lên trên thẻ ]]></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 phù hợp vị trí mà bạn thích nhé.

Bước 3: 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é:

Style#1: Trượt lên đỉnh không có hiệu ứng

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

Style#2 Trượt lên đỉnh rồi di chuyển lên xuống

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

Chèn xong rồi thì nhớ lưu lại template và tận hưởng một nút trở về đầu trang khá đẹp được làm bằng Bootstrap và jQuery.

Tag : Blog Design