Tạo nút cuộn lên đầu trang Scroll to Top

Sử dụng CSS và Jquery để tạo nút cuộn lên đầu trang. Copy toàn bộ code bên dưới dán trước thẻ </body> trong template:

<!-- Scroll to Top start -->

<style type='text/css'>

.smoothscroll-top {

    position:fixed;

    opacity:0;

    visibility:hidden;

    overflow:hidden;

    text-align:center;

    z-index:99;

    background-color:#1298c9;

    color:#fff;

    width:45px;

    height:44px;

    line-height:42px;

    right:25px;

    bottom:-25px;

    border:1px solid #ccc;

    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;

}

</style>

<div class='smoothscroll-top'>

    <span class='scroll-top-inner'>

        <i class='fa fa-angle-double-up'/>

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

<!-- Scroll to Top end -->

Scroll to Top

Chúc thành công!