MENUS
IMAGES
BUTTONS
FORMS
FILTERS
TABLES
MORE
WEBSITE
GRID
GOOGLE MAP
CONVERTERS
HOW TO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Code RUN
<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é:

Code RUN
.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:

Code RUN
<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

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top