Hướng dẫn Tạo nút cuộn lên đầu trang

Thành viên quá tích cực
Quản trị viên
Bước 1: Thêm đoạn css này vào file style css chính của bạn
Code:
.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
HTML:
<div class="car-top">
  <span><img src="{NV_BASE_SITEURL}themes/{TEMPLATE}/images/car.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
ico.zip

Lưu tất cả lại và hưởng thụ thành quả
Tham khảo : chothuexetuthang.com
 

Attachments

Lần sửa cuối: Ba 29, 2017 lúc 10:46 PM
Thành viên năng động
bước 1 là mình chèn vào style css của giao diện mình đang dùng đúng không anh?
bước 2 thì mình phải chèn vào file nào anh vì "chèn đoạn html này vào cuối trang trên thẻ </body>" em chưa hiểu mong anh chỉ rõ với
bước 3 là mình up hình vào thư mục theme là up vào thư mục hình ảnh của giao diện hay chỉ cần bỏ vào thư mục theme đó thôi anh? Với nếu em thay hình khác thì có cần phải sửa lại tên của ảnh đó không?
Mong anh chỉ giúp em ạ
 
Thành viên quá tích cực
Quản trị viên
Đã sửa lại hướng dẫn bạn kiểm tra nhé
 
Thích: doilabekho
Thành viên năng động
dạ anh.
Mà anh trong thư mục theme có thư mục images thì mình up hình vào thư mục images hay chỉ cần vào thư mục theme thôi anh? Như em là giao diện defaul thì chỉ cần mở thư mục defaul rồi dán vào đó hay là defaul/images rồi dán vào ạ?
 
Thành viên quá tích cực
Quản trị viên
đúng rồi bạn