Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web - DIỄN ĐÀN_VNTAMTAY
[ Tin nhắn mới · Thành viên · Quy tắc diễn đàn · Tìm kiếm · RSS]
THỐNG KÊ DIỄN ĐÀN
BÀI VIẾT MỚICHỦ ĐỀ SÔI ĐỘNGTHÀNH VIÊN TÍCH CỰCTHÀNH VIÊN MỚI
  • Khế ước xã hội... (1)
  • Tứ đại danh bổ... (1)
  • English For Bu... (1)
  • từ điển oto dạ... (2)
  • Thống kê 4rum ... (2)
  • Tăng font chữ ... (13)
  • Tổng Hợp về YA... (13)
  • Tử vi năm Nhâm... (11)
  • Phong thủy cho... (10)
  • Thái cực quyền... (8)
  • TieuBao
  • kcdl
  • 12a3
  • kunkun
  • Quada09
  • duyle207
  • anhlongho
  • nguyendan11061106
  • trunguyencong14
  • htsphantam
  • Page 1 of 11
    DIỄN ĐÀN_VNTAMTAY » THƯ VIỆN WEBSITE » CODE CHO WEBSITE - FORUM » Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web (Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web)
    Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web
    TieuBaoNgày: Chủ nhật, 06-Apr-14, 11:11:51 | Bài viết # 1


    Nhóm: Administrator
    Số bài viết: 3090
    Khen thưởng: 3
    Được cảm ơn: 10001
    Trạng thái: Offline
    Có nhiều website có nội dung quá nhiều trên một trang, khiến việc di chuyển trở lên đầu trang khi đã xem hết nội dung trở nên khó khăn hơn. Để khắc phục điều này ta chỉ cần tạo ra một nút di chuyển, khi người truy cập đã xem hết nội dung và muốn di chuyển lên đầu trang thì chỉ việc click vào nút đó thay vì phải sử dụng Scroll di chuyển chậm chạm. Sau đây là hướng dẫn giúp bạn tạo ra chức năng này trên web, và bạn chỉ tốn chưa đầy 5′ cho việc này.

    Có 2 cách để tạo ra chức năng này:

    Cách 1: cách này khá đơn giản và dễ thực hiện, bạn chỉ việc thêm một thẻ liên kết với thuộc tính HREF mang giá trị “#” vào vị trí chân trang trên trang web của bạn là được. Ví dụ bạn chèn đoạn mã HTML dưới đây:

    <a href="#" title="Lên đầu trang">Lên đầu trang</a>
    Cách này ưu điểm là nhanh và dễ làm, không sử dụng JavaScript. Nhưng nhược điểm là khi click để lên đầu trang thì người dùng bị “bay” lên đầu trang thay vì di chuyển lên, đôi khi khiến người xem cảm thấy đột ngột và khó chịu đồng thời nút này chỉ nằm ở cuối trang dẫn đến việc người dùng xem đến giữa trang hay bất kể vị trí nào khác ngoài chân trang thì đều không có nút này để di chuyển, ngoài ra cách này cũng tạo cảm giác thô cứng, thiếu mượt mà.

    Cách 2: Cách này sẽ khắc phục được những nhược điểm của cách 1, nhưng bạn sẽ tốn thêm chút thời gian cho cách này. Bạn có thể làm theo các bước sau:

    1/Chèn đoạn mã HTML sau vào vị trí mà bạn muốn hiển thị nút “Lên đầu trang”:

    Quote
    <div id="goTop">
    <img src="duong-dan-hinh/back-to-top.gif" alt="demo" />
    </div>


    2/Style cho nút với đoạn css sau:

    Quote
    <style type="text/css">
    #goTop {
    bottom: 200px;
    cursor: pointer;
    display: none;
    height: 35px;
    position: fixed;
    right: 155px;
    width: 44px;
    z-index: 1000;
    }
    </style>


    3/Thêm đoạn JavaScript sau:

    Quote
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) $('#goTop').fadeIn();
    else $('#goTop').fadeOut();
    });
    $('#goTop').click(function () {
    $('body,html').animate({scrollTop: 0}, 'slow');
    });
    });
    </script>

    Nhớ bỏ dòng thư viện jQuery 1.7.2 nếu web bạn đã có thư viện jQuery.
    Đoạn code trên sẽ thực hiện việc xác định thời điểm xuất hiện nút “Go to top” khi bạn Scroll chuột hay di chuyển nội dung web xuống dưới. Tùy trường hợp bạn có thể tùy chỉnh thêm bớt vị trí mà nút sẽ xuất hiện khi cách đầu trang bao nhiêu bằng cách thay số 100 trong dòng code if ($(this).scrollTop() > 100) $('#goTop').fadeIn(); đơn vị ở đây là pixel(px). Bạn cũng có thể thay tốc độ di chuyển từ vị trí click lên top trang bằng cách thay đổi thuộc tính “slow” bằng số, ví dụ như 1000 = 1 giây tại dòng code $('body,html').animate({scrollTop: 0}, 'slow');

    4/Done: Chúc bạn thành công.


    TRẺ DÙNG SỨC KHỎE KIẾM TIỀN-GIÁ DÙNG TIỀN MUA SỨC KHỎE

    NHỮNG GÌ CON NGƯỜI KHÔNG NGHĨ TỚI LẠI XẢY RA TRONG ĐỜI
     
    DIỄN ĐÀN_VNTAMTAY » THƯ VIỆN WEBSITE » CODE CHO WEBSITE - FORUM » Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web (Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web)
    Page 1 of 11
    Search:

    click ủng hộ vntamtay
    Chát với Tôi
    300
    Liên kết quảng cáo
    Buôn bán phụ tùng!
    Đang truy cập
    Khu đăng nhập
    Video Clip
    Tỷ giá tiền tệ