Bạn đang xem : html đầu trang

CÁCH THỨC – Nút Cuộn Quay lại Đầu trang

Tìm hiểu cách tạo nút “cuộn trở lại đầu trang” bằng CSS.

Hãy tự mình thử »

Cách tạo nút cuộn lên trên

Bước 1) Thêm HTML:

Tạo một nút sẽ đưa người dùng lên đầu trang khi được nhấp vào:

Ví dụ

& lt; button onclick = “topFunction ()” id = “myBtn” title = “Lên đầu” & gt; Lên trên & lt; / button & gt;

Bước 2) Thêm CSS:

Tạo kiểu cho nút:

Ví dụ

#myBtn {
display: none; / * Bị ẩn theo mặc định * /
vị trí: cố định; / * Vị trí cố định / dính * /
bottom: 20px;
/ * Đặt nút ở cuối trang * /
bên phải: 30px; / * Đặt nút cách bên phải 30px * /
z-index: 99;
/ * Đảm bảo rằng nó không chồng chéo * /
viền:
không ai; / * Xóa đường viền * /
outline: none; /* Loại bỏ
phác thảo * /
background-color: đỏ; / * Đặt màu nền * /
color: white;
/ * Màu văn bản * /
con trỏ: con trỏ; / * Thêm con trỏ chuột khi di chuột * /
padding:
15px;
/ * Một số đệm * /
bán kính đường viền: 10px; / * Các góc được làm tròn * /
font-size:
18px; / * Tăng kích thước phông chữ * /
}

#myBtn: hover {
background-color: # 555; / * Thêm nền xám đậm khi di chuột * /
}

Bước 3) Thêm JavaScript:

Ví dụ

// Lấy nút:
mybutton = document.getElementById (“myBtn”);

// Khi người dùng cuộn xuống 20px từ đầu tài liệu, hiển thị
button
window.onscroll = function () {scrollFunction ()};

chức năng
scrollFunction () {
if (document.body.scrollTop & gt; 20 ||
document.documentElement.scrollTop & gt; 20) {
mybutton.style.display = “block”;
} else {
mybutton.style.display
= “none”;
}
}

// Khi người dùng nhấp vào
, cuộn lên đầu tài liệu
function topFunction () {
document.body.scrollTop = 0; // Đối với Safari
document.documentElement.scrollTop = 0; // Đối với Chrome, Firefox, IE và Opera
}

Xem Thêm  Danh sách Python .append () - Cách thêm một mục vào danh sách bằng Python - thêm mục vào danh sách

Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề html đầu trang

Hiệu ứng cố định header khi cuộn trang bằng html css jquery | Unitop.vn

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-02-18
  • Đánh giá: 4 ⭐ ( 5816 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cố định header đang cuộn trang(sticky header) thường thấy ở các website nước ngoài. Trong video này tôi hướng dẫn bạn cách tạo ra nó từng bước với html, css và jquery.
    ——
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ————
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    ————————–
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Nút Trở lên đầu trang đơn giản với Bootstrap 3 – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 5 ⭐ ( 6559 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nút Trở lên đầu trang hay Back to top là một phần cơ bản của hầu hết website. Nó giúp cho người dùng dễ dàng…

Tạo nút back to top lên đầu trang với css và jquery – 123itvn.com

  • Tác giả: www.123itvn.com
  • Đánh giá: 4 ⭐ ( 7581 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Back to top – điểm nhấn để website của bạn trở nên chuyên nghiệp hơn.

Đầu trang / Chân trang chung với HTML tĩnh

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7310 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Có ba cách để làm những gì bạn muốn Tập lệnh máy chủ Điều này bao…

Tạo Trang Landing Page Bằng HTML CSS

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 7819 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay mình sẽ giới thiệu đến bạn cách tạo landing page bằng HTML CSS cho trang web nhé!

Hướng dẫn tạo thanh top navigation bằng HTML và CSS

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 2431 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Navigation là một phần không thể thiếu trong mỗi website. Thiết kế một thanh navigation giúp trang web của chúng ta thêm rõ ràng hơn, giúp người dùng có thể.

Phần 0: Trang Web Đầu Tiên — HTML Cheat Sheet

  • Tác giả: www.stdio.vn
  • Đánh giá: 4 ⭐ ( 4420 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn từng bước đầu tiên tạo trang web với HTML.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để Nhúng Phông chữ vào HTML? - cách thêm phông chữ vào html

By ads_php