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

Thứ ba - 06/04/2021 23:12 88
Bước 1: Thêm đoạn css này vào file style css chính của bạn
.car-top { width: 62px; position: fixed; bottom: -180px; right: 30px; z-index: 9999; opacity: 1; cursor: pointer; }
.car-top.show { bottom: 5% !important; -webkit-transition: 1.0s; -moz-transition: 1.0s; transition: 1.0s; }
.car-top.car-run { bottom: 100% !important; -webkit-transition: 1.0s; -moz-transition: 1.0s; transition: 1.0s; }
.car-top.car-down { -webkit-transition: 1.0s; -ms-transition: 1.0s; -o-transition: 1.0s; -moz-transition: 1.0s; transition: 1.0s; }
.car-top:before, .car-top:after { content: ""; position: absolute; -o-transition: 0.2s; -webkit-transition: 0.2s; -ms-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; opacity: 0; }
.car-top:hover:before, .car-top:hover:after, .car-top.car-run:before, .car-top.car-run:after { opacity: 1; }
.car-top:before, .car-top.car-run:before { top: -1px; left: -7px; width: 70px; height: 54px; background: url(../images/car-focus.png) no-repeat 0 0; }
.car-top img{width:60px;}
Bước 2: chèn đoạn html này vào cuối trang trên thẻ </body>
Tức là mở file themes/theme_bạn/layout/footer_only.tpl
<div class="car-top">
  <span><img src="/themes/vanhoa/images/top.png" alt=""></span>
</div>

<script type="text/javascript">
var $scrolltop = $('.car-top');
$scrolltop.on('click', function () {
    $('html,body').animate({
        scrollTop: 0
    }, 800);
    $(this).addClass("car-run");
    setTimeout(function(){ $scrolltop.removeClass('car-run');}, 1000);
    return false;
});
$(window).on('scroll', function ()
{ 
    if($(window).scrollTop() >= 200)
    {
        $scrolltop.addClass("show");
        $scrolltop.addClass("car-down");
    }
    else
    {
       $scrolltop.removeClass("show");
       setTimeout(function(){ $scrolltop.removeClass('car-down');}, 300);
    }
});
</script>
Bước 3: úp 2 hình đính kèm vào thư mục theme của bạn
Lưu tất cả lại và hưởng thụ thành quả
 

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây