ĐĂNG KÝ NHẬN TIN

Nhập Email để nhận những bài viết mới nhất
Thống kê truy cập
  • Đang truy cập10
  • Máy chủ tìm kiếm1
  • Khách viếng thăm9
  • Hôm nay668
  • Tháng hiện tại16,534
  • Tổng lượt truy cập191,531
đề thi học kỳ 2 tiểu học
5512
GIÁO ÁN THEO CHỦ ĐỀ

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

Thứ ba - 06/04/2021 23:12 15 0
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/egov/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