Bài 29: Thiết kế footer + nút lên đầu trang

Footer (chân trang) là phần kết của một website, thường được dùng để:

• Hiển thị thông tin liên hệ, copyright
• Đặt liên kết mạng xã hội, menu phụ
• Tăng độ tin cậy và hoàn thiện giao diện

Ngoài ra, chúng ta cũng sẽ tạo nút “lên đầu trang” (Back to Top) – giúp người dùng cuộn nhanh trở lại đầu website khi đã kéo xuống sâu.

1. Cấu trúc HTML cho footer

📋 Copy<footer class="site-footer">
  <div class="footer-container">
    <div class="footer-about">
      <h4>Về chúng tôi</h4>
      <p>Trang web học lập trình HTML & CSS.</p>
    </div>
    <div class="footer-links">
      <h4>Liên kết</h4>
      <ul>
        <li><a href="#">Trang chủ</a></li>
        <li><a href="#">Liên hệ</a></li>
        <li><a href="#">Chính sách</a></li>
      </ul>
    </div>
    <div class="footer-social">
      <h4>Theo dõi</h4>
      <p>Facebook | YouTube | GitHub</p>
    </div>
  </div>
  <div class="footer-bottom">
    &copy; 2025 MySite. All rights reserved.
  </div>
</footer>

2. CSS cho giao diện footer

📋 Copy.site-footer {
  background: #2c3e50;
  color: #fff;
  padding: 40px 20px 20px;
  font-size: 14px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.footer-container div {
  flex: 1;
  min-width: 200px;
}

.footer-container h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #f1c40f;
}

.footer-container a {
  color: #fff;
  text-decoration: none;
}

.footer-container a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #444;
  padding-top: 10px;
  font-size: 13px;
  color: #aaa;
}

3. Responsive cho footer

📋 Copy@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

4. Nút “Lên đầu trang” (Back to Top)

HTML:

📋 Copy<button id="backToTop" title="Lên đầu trang">↑</button>

CSS:

📋 Copy#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  padding: 10px 14px;
  font-size: 18px;
  background: #f1c40f;
  color: #2c3e50;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

JavaScript:

📋 Copy<script>
  const backToTop = document.getElementById('backToTop');

  window.addEventListener('scroll', function () {
    if (window.scrollY > 300) {
      backToTop.style.display = 'block';
    } else {
      backToTop.style.display = 'none';
    }
  });

  backToTop.addEventListener('click', function () {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
</script>

5. Tối ưu UX

• Nút back-to-top nên chỉ xuất hiện khi cuộn xuống đủ sâu
• Có thể thay nút bằng icon SVG hoặc hình ảnh
• Giữ bố cục footer rõ ràng, không nhồi quá nhiều nội dung

Tóm tắt bài học