Hướng dẫn Tạo nút cuộn trang lên xuống scroll to top và scroll to bottom

Thảo luận trong 'Tips and Guides' bắt đầu bởi Blue, 14/10/2017.

  • Google checker:
  1. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    773
    Đã được thích:
    1,185
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Mình vừa tiện tay chỉnh sửa một đoạn code nhỏ tạo ra 2 nút ở góc dưới bên phải trang web, giúp người xem dễ dàng cuộn trang lên trên cùng hay xuống cùng chỉ bằng 1 cú click chuột. Code dạng này thường được gọi là scroll to top và scroll to bottom. Nút scroll lên xuống không có gì xa lạ vì các webmaster luôn dùng nó cho website, search trên Google có rất nhiều hướng dẫn và mình tóm lược lại 1 cách đơn giản dễ hiểu nhất để các bạn chỉ cần copy paste là xong.

    scroll to top bottom.jpg

    Bạn vào Template footer trong giao diện đang sử dụng (đối với XenForo) hoặc khu vực footer (nhớ là phải nằm trên thẻ </body>) của các loại trang web khác dán đoàn code bên dưới vào là xong.

    Mã:
    <style type="text/css">
    #scrollToTop, #scrollToBottom {
        cursor: pointer;
        background-color: #014590; /* Đổi màu nền ở đây */
        display: inline-block;
        height: 40px;
        width: 40px;
        color: #fff; /* Đổi màu mũi tên ở đây */
        font-size: 16pt;
        text-align: center;
        text-decoration: none;
        line-height: 40px;
        position: fixed;
        right: 0; /* Đổi khoảng cách so với lề phải ở đây, nếu muốn hiện ở lề trái thì đổi thành left */
        bottom: 25px; /* Khoảng cách từ nút cho tới chân trang */
        display:none;
    }
    #scrollToTop {
        bottom: 75px;
    }
    </style>
    <script type = "text/javascript">
    $(function () {
        $('#scrollToBottom').bind("click", function () {
            $('html, body').animate({ scrollTop: $(document).height() }, 1200);
            return false;
        });
        $('#scrollToTop').bind("click", function () {
            $('html, body').animate({ scrollTop: 0 }, 1200);
            return false;
        });
    });
    $(window).bind("scroll", function () {
        if ($(this).scrollTop() > 0) {
            $('#scrollToTop').show();
            $('#scrollToBottom').show();
        } else {
            $('#scrollToTop').hide();
            $('#scrollToBottom').hide();
        }
    });
    </script>
    
    <a href="javascript:;" id="scrollToBottom">&#x25BC;</a>
    <a href="javascript:;" id="scrollToTop">&#x25B2;</a>
    
    Chúc các bạn thành công!
     
    Chỉnh sửa cuối: 14/10/2017
    Tags:
  2. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    9,352
    Đã được thích:
    6,232
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
  3. singh

    singh Thượng Đế

    Tham gia:
    08/06/2015
    Bài viết:
    398
    Đã được thích:
    215
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Design
    Nơi ở:
    ho chi minh
    nút này hợp hơn cho xenforo ^^
    Untitled.png
     
  4. YenBee

    YenBee Thượng Đế

    Tham gia:
    22/03/2018
    Bài viết:
    12
    Đã được thích:
    12
    Điểm thành tích:
    3
    Giới tính:
    Nữ
    Nơi ở:
    Hà Nội
    Chào cả nhà nha!
    Trong Template footer, mình đã tìm mờ mắt mà không thấy thẻ </body> nằm chỗ mô? Ai có thể comment hướng dẫn lại cách tạo 2 nút scroll to Top và scroll to Down để dân đen bít làm tốt được nhỉ.
    Cảm ơn cả nhà!
     
  5. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,549
    Đã được thích:
    1,221
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    trong template footer hoặc trong khu vực footer của template PAGE_CONTAINER
     
    phamquangquyen and YenBee like this.
  6. YenBee

    YenBee Thượng Đế

    Tham gia:
    22/03/2018
    Bài viết:
    12
    Đã được thích:
    12
    Điểm thành tích:
    3
    Giới tính:
    Nữ
    Nơi ở:
    Hà Nội
    Cảm ơn datdaik000, mình đã lần đầu làm chuyện ấy chưa đầy 5 giây.
    Cảm tạ, cảm tạ datdaik000.
     
    phamquangquyen thích bài này.
  7. levantukg

    levantukg Thượng Đế

    Tham gia:
    11/08/2018
    Bài viết:
    51
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    Kien Giang
    Nhờ bạn hướng dẫn chi tiết cho mình với.
     
  8. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,549
    Đã được thích:
    1,221
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    Bạn vào PAGE_CONTAINER tìm đoạn </body> rồi chèn ngay phía trước
    Mã:
    <style type="text/css">
    #scrollToTop, #scrollToBottom {
        cursor: pointer;
        background-color: #014590; /* Đổi màu nền ở đây */
        display: inline-block;
        height: 40px;
        width: 40px;
        color: #fff; /* Đổi màu mũi tên ở đây */
        font-size: 16pt;
        text-align: center;
        text-decoration: none;
        line-height: 40px;
        position: fixed;
        right: 0; /* Đổi khoảng cách so với lề phải ở đây, nếu muốn hiện ở lề trái thì đổi thành left */
        bottom: 25px; /* Khoảng cách từ nút cho tới chân trang */
        display:none;
    }
    #scrollToTop {
        bottom: 75px;
    }
    </style>
    <script type = "text/javascript">
    $(function () {
        $('#scrollToBottom').bind("click", function () {
            $('html, body').animate({ scrollTop: $(document).height() }, 1200);
            return false;
        });
        $('#scrollToTop').bind("click", function () {
            $('html, body').animate({ scrollTop: 0 }, 1200);
            return false;
        });
    });
    $(window).bind("scroll", function () {
        if ($(this).scrollTop() > 0) {
            $('#scrollToTop').show();
            $('#scrollToBottom').show();
        } else {
            $('#scrollToTop').hide();
            $('#scrollToBottom').hide();
        }
    });
    </script>
    
    <a href="javascript:;" id="scrollToBottom">&#x25BC;</a>
    <a href="javascript:;" id="scrollToTop">&#x25B2;</a>
     
  9. dhot5hui

    dhot5hui Thượng Đế

    Tham gia:
    02/04/2017
    Bài viết:
    26
    Đã được thích:
    20
    Điểm thành tích:
    3
    Hay lắm, cảm ơn Ad nhiều
     
Tags:

Chia sẻ trang này

Đang tải...