Hướng dẫn tạo Scroll To Top Button

DEMO

Scroll To Top Button là một button sẽ giúp cho người dùng trở về đầu trang, nó rất hay được sử dụng trong các website có nhiều nội dung. Trong bài này mình sẽ cùng các bạn xây dựng một Scroll To Top Button đơn giản với CSS và Javascript.

1. Xây dựng giao diện

Đầu tiên là phần giao diện hiển thị, các bạn tạo file index.html và tạo ra các thành phần bằng đoạn mã dưới đây:

<div class="container">
    <button id="myBtn" title="Go to top">Back To Top</button>
    <div style="background-color:black;color:white;padding:30px">
        Freetuts.net hướng dẫn tạo Scroll To Top Button
    </div>
    <p style="background-color:#66FFCC;padding:30px 30px 2500px">
        PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập 
        trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng
        dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất
        thích hợp với web và có thể dễ dàng nhúng vào trang HTML..
    </p>
</div>   

Ở đây mìn sẽ tạo một button sẽ đóng vai trò là Scroll To Top Button, nhân vật chính của chúng ta, sau đó tạo một phần tạm coi là header với màu đen để các bạn dễ dàng nhận ra sự thay đổi khi click vào Scroll To Top Button, phần còn lại là nội dung rất đơn giản các bạn có thể thay đổi theo ý mình. Các bạn nhớ để height của phần nội dung này lớn một chút để tiện cho việc cuộn con trỏ chuột nhé.

2. Thêm CSS để định dạng các thành phần

Trong bước này chúng ta sẽ sử dụng CSS để định dạng cho các thành phần đã tạo ở trên, các bạn đặt đoạn mã CSS này vào bên trong thẻ style nhé:

.container {
    width: 500px;
    margin: auto;
}
/* định dạng cho button */ 
#myBtn {
  display: none; /* Mặc định button sẽ được ẩn*/
  position: fixed;
  bottom: 20px;
  right: 30px; 
  z-index: 99; /* button được ưu tiên hiển thị đè lên các phần khác*/
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}

Đoạn mã này rất đơn giản, những điểm cần lưu ý mình đã có ghi chú rõ ràng trong mã nguồn.

3. Thêm xử lý bằng Javascript

Bước cuối cùng, ta sẽ thêm các phần xử lý bằng javascript, các bạn đặt đoạn mã script này vào sau thẻ body:

<script>
    //Khi người dùng cuộn chuột thì gọi hàm scrollFunction
    window.onscroll = function() {scrollFunction()};
    // khai báo hàm scrollFunction
    function scrollFunction() {
        // Kiểm tra vị trí hiện tại của con trỏ so với nội dung trang
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            //nếu lớn hơn 20px thì hiện button
            document.getElementById("myBtn").style.display = "block";
        } else {
             //nếu nhỏ hơn 20px thì ẩn button
            document.getElementById("myBtn").style.display = "none";
        }
    }
    //gán sự kiện click cho button
    document.getElementById('myBtn').addEventListener("click", function(){
        //Nếu button được click thì nhảy về đầu trang
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    });
</script>

Để hiểu được quy trình cũng như thuật toán mà chúng ta áp dụng các bạn nên đọc kỹ phần ghi chú, mình đã giải thích rất tường tận các dòng lệnh của đoạn script trên nên chắc sẽ không có khó khăn gì với các bạn.

Vậy là xong, giờ các bạn chạy file index.html để xem thành quả nhé.

4. Lời kết

Qua bài viết này mình đã cùng các bạn tạo thành công một Scroll To Top Button đơn giản, các bạn có thể dựa vào nó để tạo thêm Scroll To Bottom Button, Hi vọng nó sẽ giúp đỡ các bạn phần nào trong quá trình xây dựng website. Nếu có bất cứ thắc mắc gì các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

Nguồn: freetuts.net