Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo nút Scroll to Top cho Xenforo khi cuộn trang xuống dưới

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi PCO, 1/2/16.

Lượt xem: 2,565

  1. PCO Thành viên cấp 2

    Khi bạn đọc một bài viết dài sẽ rất mất thời gian khi muốn cuộn về menu ở header của trang, rất nhiều website đã tạo 1 nút gọi là scroll to top hoặc back to top nằm ở góc phải giao diện. Khi nhấn vào nút này sẽ giúp bạn trở về header trang ngay lập tức.

    61ajJ0T.png
    Hình minh họa

    Để thực hiện điều này các bạn chỉ cần vào style đang sử dụng, gắn đoạn code bên dưới vào cuối (nằm trên thẻ </body>) template footer
    Code:
    <style>
    #toTop {
        background: #f7f7f7;
        border: 1px solid #ccc;
        border-radius: 5px;
        bottom: 40px;
        color: #333;
        cursor: pointer;
        display: none;
        font-size: 11px;
        padding: 18px;
        position: fixed;
        right: 20px;
        text-align: center;
    }
    #toTop::before {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: transparent transparent @primaryMedium; /*Đổi #198708 bằng mã màu bạn muốn*/
        border-image: none;
        border-style: solid;
        border-width: 11px;
        content: "";
        height: 0;
        left: 7px;
        position: absolute;
        top: -4px;
        width: 0;
    }
    #toTop::after {
        background-color: @primaryMedium;;
        content: "";
        height: 12px;
        left: 13px;
        position: absolute;
        top: 18px;
        width: 10px;
    }
    </style>
    <div id="toTop"></div>
    <script type="text/javascript">
        //roll top
        $(function() {
            $(window).scroll(function() {
                if($(this).scrollTop() != 0) {
                    $('#toTop').fadeIn(); 
                } else {
                    $('#toTop').fadeOut();
                }
            });
      
            $('#toTop').click(function() {
                $('body,html').animate({scrollTop:0},800);
            }); 
        });
    </script>

    Nguồn: VNXF.VN

    ...
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn