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

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
841
Reaction score
1,368
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!
 
Sửa lần cuối:

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,429
Reaction score
7,887

singh

Thượng Đế
Tham gia
08/06/2015
Bài viết
460
Reaction score
276
nút này hợp hơn cho xenforo ^^
Untitled.png
 

YenBee

Thượng Đế
Tham gia
22/03/2018
Bài viết
12
Reaction score
19
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à!
 

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,945
Reaction score
1,563
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à!
trong template footer hoặc trong khu vực footer của template PAGE_CONTAINER
 

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,945
Reaction score
1,563
Nhờ bạn hướng dẫn chi tiết cho mình với.
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>
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom