Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Các sự kiện (Event) trong Javascript 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Hàm array map() trong Javascript 
Các cách khai báo biến trong Javascript 
Bắt sự kiện click trong Javascript 
Function trong Javascript - cách tạo hàm và gọi hàm trong JS 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 
Thẻ Table trong HTML (colspan, rowspan, cellpadding và cellspacing) 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:
<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é:
Bài viết này được đăng tại [free tuts .net]
.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
