Tạo Nút Quay Lại Đầu Trang Với jQuery và Bootstrap

Bài viết này hướng dẫn cách xây dựng một nút "Quay Lại Đầu Trang" đơn giản bằng cách sử dụng jQuery và Bootstrap. Khi người dùng cuộn trang xuống một khoảng nhất định, nút này sẽ xuất hiện, cho phép họ nhanh chóng quay trở lại phần đầu của trang web.

Các Bước Thực Hiện

  1. Tích hợp jQuery và Bootstrap

    Để bắt đầu, bạn cần đảm bảo rằng các thư viện jQuery và Bootstrap đã được liên kết trong dự án của bạn. Bạn có thể thực hiện điều này bằng cách thêm các thẻ <script> và <link> tương ứng vào phần <head> hoặc trước thẻ </body> của tệp HTML.

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>

  2. Tạo cấu trúc nút

    Tiếp theo, tạo một phần tử liên kết (<a>) đóng vai trò là nút. Sử dụng một biểu tượng mũi tên lên từ bộ biểu tượng của Bootstrap để hiển thị trên nút.

    <a href="#" id="backToTopBtn" title="Quay lại đầu trang">
    <i class="fas fa-arrow-up"></i> <!-- Sử dụng Font Awesome hoặc Bootstrap Icons -->
</a>

    Lưu ý: Ví dụ gốc sử dụng glyphicon của Bootstrap 3. Trong ví dụ này, chúng ta sử dụng Font Awesome (fas fa-arrow-up) cho tính tương thích rộng rãi hơn với Bootstrap 4/5. Bạn cần liên kết thư viện Font Awesome nếu sử dụng.

  3. Thiết lập kiểu dáng (CSS)

    Định dạng nút bằng CSS để nó hiển thị cố định ở một vị trí nhất định trên trang, ví dụ như góc dưới bên phải, và có giao diện hấp dẫn.

    #backToTopBtn {
    display: none; /* Ban đầu ẩn nút */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Làm cho nút có dạng tròn */
    font-size: 18px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px; /* Căn giữa biểu tượng theo chiều dọc */
}

#backToTopBtn:hover {
    background-color: #333;
}

  4. Viết mã JavaScript điều khiển

    Sử dụng jQuery để xử lý logic hiển thị và chức năng của nút.

    • Hiển thị/Ẩn nút: Theo dõi sự kiện cuộn trang ($(window).scroll()). Nếu vị trí cuộn vượt quá một ngưỡng nhất định (ví dụ: 200 pixel), nút sẽ hiển thị (fadeIn()); ngược lại, nút sẽ ẩn đi (fadeOut()).
    • Xử lý sự kiện click: Khi người dùng nhấp vào nút, sử dụng phương thức animate() để cuộn trang lên đầu một cách mượt mà.
    • Thay đổi văn bản khi rê chuột: Thêm hiệu ứng khi người dùng rê chuột qua nút, thay đổi nội dung để hiển thị văn bản "Quay lại đầu trang".
    $(document).ready(function() {
    var backToTopButton = $('#backToTopBtn');

    // Hiển thị hoặc ẩn nút khi cuộn trang
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            backToTopButton.fadeIn();
        } else {
            backToTopButton.fadeOut();
        }
    });

    // Xử lý sự kiện rê chuột qua nút
    backToTopButton.hover(
        function() {
            $(this).text('Quay lại'); // Thay đổi văn bản khi rê chuột vào
        },
        function() {
            // Khôi phục biểu tượng khi rê chuột ra
            $(this).html('<i class="fas fa-arrow-up"></i>');
        }
    );

    // Xử lý sự kiện click để cuộn về đầu trang
    backToTopButton.on('click', function(e) {
        e.preventDefault(); // Ngăn chặn hành vi mặc định của thẻ a
        $('html, body').animate({
            scrollTop: 0
        }, 800); // Thời gian cuộn là 800ms (có thể điều chỉnh)
    });
});

Mã HTML Hoàn Chỉnh Minh Họa

Dưới đây là ví dụ về cách kết hợp tất cả các phần trên vào một tệp HTML duy nhất.

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nút Quay Lại Đầu Trang</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
    <!-- Font Awesome CSS (cho biểu tượng) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
    <style>
        body {
            height: 5000px; /* Để có thể cuộn trang */
            background-color: #f0f0f0;
            padding-top: 60px; /* Tạo khoảng trống cho navbar cố định nếu có */
        }
        #backToTopBtn {
            display: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #007bff; /* Màu xanh của Bootstrap */
            color: white;
            cursor: pointer;
            padding: 10px 15px;
            border-radius: 50%;
            font-size: 20px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 30px; /* Điều chỉnh để icon căn giữa */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        #backToTopBtn:hover {
            background-color: #0056b3;
            color: white;
        }
        /* Thêm một số nội dung mẫu để trang dài hơn */
        .content-section {
            padding: 50px 20px;
            margin-bottom: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

<!-- Nội dung mẫu để tạo trang dài -->
<div class="container">
    <h1>Trang Web Mẫu</h1>
    <p>Hãy cuộn xuống để xem nút quay lại đầu trang xuất hiện.</p>
    <div class="content-section">
        <h2>Phần 1</h2>
        <p>Nội dung mẫu...</p>
    </div>
    <div class="content-section">
        <h2>Phần 2</h2>
        <p>Nội dung mẫu...</p>
    </div>
    <div class="content-section">
        <h2>Phần 3</h2>
        <p>Nội dung mẫu...</p>
    </div>
    <div class="content-section">
        <h2>Phần Cuối</h2>
        <p>Nội dung mẫu...</p>
    </div>
</div>

<!-- Nút Quay Lại Đầu Trang -->
<a href="#" id="backToTopBtn" title="Quay lại đầu trang">
    <i class="fas fa-arrow-up"></i>
</a>

<!-- jQuery JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS (nếu cần các component khác của Bootstrap) -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
    var backToTopButton = $('#backToTopBtn');

    // Hiển thị hoặc ẩn nút khi cuộn trang
    $(window).scroll(function() {
        // Kiểm tra xem người dùng đã cuộn xuống hơn 200px chưa
        if ($(this).scrollTop() > 200) {
            backToTopButton.fadeIn(); // Hiển thị nút
        } else {
            backToTopButton.fadeOut(); // Ẩn nút
        }
    });

    // Xử lý sự kiện rê chuột qua nút
    backToTopButton.hover(
        function() {
            // Thay đổi nội dung thành văn bản khi rê chuột vào
            $(this).text('Quay Lại');
            $(this).css({
                'font-size': '14px', // Giảm kích thước font để vừa văn bản
                'line-height': '50px', // Căn lại dòng
                'padding': '0' // Bỏ padding nếu cần
            });
        },
        function() {
            // Khôi phục biểu tượng khi rê chuột ra
            $(this).html('<i class="fas fa-arrow-up"></i>');
            $(this).css({
                'font-size': '20px', // Về kích thước font ban đầu
                'line-height': '30px', // Về line-height ban đầu
                'padding': '10px 15px' // Về padding ban đầu
            });
        }
    );

    // Xử lý sự kiện click để cuộn về đầu trang
    backToTopButton.on('click', function(e) {
        e.preventDefault(); // Ngăn chặn hành vi mặc định (ví dụ: nhảy đến #)
        $('html, body').animate({
            scrollTop: 0 // Cuộn về vị trí 0 (đầu trang)
        }, 800); // Tốc độ cuộn (milliseconds)
    });
});
</script>

</body>
</html>

Thẻ: jQuery Bootstrap JavaScript HTML css

Đăng vào ngày 13 tháng 11 lúc 21:13

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn