Bạn có thể đã thấy nút “quay lại đầu trang” ở góc dưới cùng bên phải trên nhiều trang web khi bạn cuộn xung quanh. Nhấp vào nút đó sẽ đưa bạn trở lại đầu trang. Đây là một tính năng tuyệt vời cần có trên bất kỳ trang web nào và hôm nay chúng ta sẽ xem cách

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

Bạn đã có thể đã thấy nút “quay lại đầu trang” ở góc dưới cùng bên phải trên nhiều trang web khi bạn cuộn xung quanh. Nhấp vào nút đó sẽ đưa bạn trở lại đầu trang.

Đây là một tính năng tuyệt vời cần có trên bất kỳ trang web nào và hôm nay chúng ta sẽ xem cách xây dựng nó mà không cần dùng gì ngoài HTML, CSS và JavaScript.

Chúng ta cũng sẽ xem xét cách thêm thanh tiến trình trang, thanh tiến trình ở trên cùng sẽ tăng dần khi chúng ta cuộn xuống và giảm khi chúng ta cuộn lên.

Lưu ý rằng bạn có thể thêm phần này vào bất kỳ trang web nào, cho dù đó là trang hiện có hay trang web bạn mới bắt đầu làm việc. Yêu cầu duy nhất là trang web phải có đủ nội dung (hoặc chiều cao nội dung đủ lớn) để có thể cuộn được, nếu không, việc thêm nội dung này sẽ không hợp lý.

Đây là CodePen về những gì chúng ta sẽ làm để xây dựng (cuộn để xem điều kỳ diệu):

Nút Quay lại Đầu trang và thanh Tiến trình trang với HTML, CSS và JS CodePen

Cách Tạo Nút Quay lại Đầu trang cho Trang web của Bạn

Trước hết, tôi sẽ làm cho phần nội dung của trang web thật lớn để có thể cuộn trang web:

  body {
  chiều cao: 5000px;
}  

Nội dung tài liệu có thể cuộn được bằng cách đặt chiều cao 5000px

Tôi cũng sẽ thêm một gradient tuyến tính vào nội dung tài liệu để chúng tôi có thể biết rằng tài liệu đang được cuộn:

  body {
  chiều cao: 5000px;
  background: linear-gradient (# 00ff04, # 09aad3);
}  

Hãy nhanh chóng thêm nút Quay lại đầu trang vào phần đánh dấu:

  & lt; button class = "back- lên đầu "& gt; Quay lại đầu trang & lt; / nút & gt;
 

Nút quay lại đầu trang với một lớp cho các kiểu cơ sở

Hãy cũng định vị nút như sau:

 . back-to -đứng đầu {
  vị trí: cố định;
  bên phải: 2rem;
  phía dưới: 2rem;
}  

Các kiểu cho nút quay lại đầu trang

Ở đây, chúng tôi đặt nó ở một vị trí cố định để nó vẫn ở trong chế độ xem ngay cả khi tài liệu được cuộn. Chúng tôi cũng đang đẩy nó 2rem từ phía dưới cùng và bên phải của màn hình.

Đây là giao diện tài liệu của chúng tôi bây giờ:

Tài liệu có nền gradient và một nút cố định và góc dưới cùng bên phải có nội dung "Quay lại đầu trang" Tài liệu có nền gradient và một nút cố định và góc dưới cùng bên phải có nội dung” Quay lại đầu trang “

Bây giờ, đã đến lúc cho phần thú vị – thêm logic.

Cách chỉ hiển thị nút Quay lại đầu trang khi cuộn

Bây giờ, chúng tôi không muốn nút Quay lại đầu trang hiển thị mọi lúc – như khi người dùng ở đầu trang. Vì vậy, chúng tôi sẽ hiển thị nó có điều kiện.

Đối với ví dụ này, chúng tôi sẽ chỉ hiển thị nó khi người dùng đã cuộn ít nhất 100 pixel.

Trước hết, chúng tôi cần ẩn nút bất cứ khi nào người dùng mở Địa điểm. Chúng tôi cũng cần đảm bảo rằng chúng tôi thêm kiểu này, tách biệt với các kiểu cơ bản của nút, vì nút cần được hiển thị khi cuộn.

HTML:

  & lt; button class =" back-to-top hidden "& gt; Back To Top & lt; / button & gt;  

Nút Back To Top với lớp ẩn và kiểu cơ sở

CSS:

 . hidden {
  không trưng bày;
}  

Lớp ẩn không hiển thị

Đây là mã để hiển thị nút có điều kiện:

  const showOnPx = 100;
const backToTopButton = document.querySelector (". back-to-top")

const scrollContainer = () = & gt; {
  trả về tài liệu.documentElement || document.body;
};

document.addEventListener ("scroll", () = & gt; {
  if (scrollContainer (). scrollTop & gt; showOnPx) {
    backToTopButton.classList.remove ("ẩn")
  } khác {
    backToTopButton.classList.add ("ẩn")
  }
})  

Mã để hiển thị / ẩn nút có điều kiện

Xem Thêm  charAt () trong Java - char tại java

Ở đây, hàm scrollContainer trả về document.documentElement , không có gì khác ngoài Phần tử HTML của tài liệu của chúng tôi. Trong trường hợp không có sẵn, phần tử document.body sẽ được trả về để thay thế.

Tiếp theo, chúng tôi sẽ thêm trình xử lý sự kiện vào tài liệu của mình. Phần tử này sẽ kích hoạt chức năng gọi lại khi cuộn. scrollTop ( Tham chiếu MDN) giá trị mà chúng tôi nhận được từ scrollContainer tương ứng không là gì khác ngoài số pixel mà phần tử đó đã được cuộn từ trên cùng.

Tại đây, khi giá trị đó cao hơn giá trị showOnPx đã đặt của chúng tôi, tức là 100px , chúng tôi sẽ xóa lớp ẩn khỏi nút của chúng tôi. Nếu không đúng như vậy, chúng tôi sẽ thêm lớp vào nút (đặc biệt hữu ích khi người dùng cuộn lên theo cách thủ công).

Bây giờ, hãy làm việc theo logic để cuộn lên đầu bất cứ khi nào người dùng nhấp vào nút.

Cách cuộn lên đầu bất cứ khi nào người dùng nhấp vào Nút Quay lại Đầu trang

Hãy nhanh chóng viết một hàm cho điều này:

  const goToTop = () = & gt; {
  document.body.scrollIntoView ();
};  

goToTop function

Hàm scrollIntoView () ( MDN Reference ) cuộn trang để đưa phần tử mà nó đang được gọi vào trong tầm nhìn. Ở đây chúng tôi đang gọi nó trên phần thân nên trang sẽ được cuộn lên trên cùng.

Bây giờ, chúng ta cần hàm này được gọi bất cứ khi nào nhấp vào Nút Quay lại Đầu trang:

  backToTopButton.addEventListener ("click", goToTop)  

Gọi goToTop () khi nhấp vào nút quay lại đầu trang

Vậy là xong! Chúng tôi đã thêm thành công chức năng Quay lại đầu trang vào trang web của mình.

Cách làm cho cuộn trơn tru

Bây giờ, cuộn trở lại đầu trang khá khắc nghiệt. Hãy xem xét làm cho nó mượt mà hơn. Chúng ta có thể thực hiện việc này bằng cách chuyển behavior as Smooth vào hàm scrollIntoView () .

  const goToTop = () = & gt; {
  document.body.scrollIntoView ({
    hành vi: "mượt mà",
  });
};  

Làm cho cuộn mượt mà hơn

Vậy là xong! Giờ đây, việc cuộn rất đẹp và mượt mà.

Cách tạo kiểu cho nút Quay lại Đầu trang

Đúng bây giờ, nút Quay lại đầu trang là một nút HTML đơn giản với một số văn bản – và điều đó trông khá xấu. Vì vậy, hãy để chúng tôi tạo kiểu cho nó.

Trước đó, chúng tôi sẽ thay thế văn bản bằng SVG, vì vậy, hãy để tôi nhanh chóng lấy một từ HeroIcons :

  & lt; button class =" back-to-top hidden "& gt;
  & lt; svg
    xmlns = "http://www.w3.org/2000/svg"
    class = "back-to-top-icon"
    fill = "none"
    viewBox = "0 0 24 24"
    stroke = "currentColor"
  & gt;
    & lt; đường dẫn
      stroke-linecap = "round"
      stroke-linejoin = "round"
      stroke-width = "2"
      d = "M7 11l5-5m0 0l5 5m-5-5v12"
    / & gt;
  & lt; / svg & gt;
& lt; / button & gt;  

Thêm biểu tượng SVG thay vì văn bản vào Nút Quay lại Đầu trang

Chúng tôi cung cấp cho biểu tượng một lớp có tên là back-to-top-icon . Điều này rất quan trọng vì biểu tượng không hiển thị ngay lập tức và do đó cần được tạo kiểu để hiển thị.

 . Back-to-top-icon {
  chiều rộng: 1rem;
  chiều cao: 1rem;
  màu đen;
}  

Tạo kiểu cho biểu tượng của Nút Quay lại Đầu trang để làm cho nó hiển thị

Đây là giao diện của nút của chúng ta bây giờ:

Nút có biểu tượng SVG được tạo kiểu Nút có kiểu Biểu tượng SVG

Nút này trông vẫn khá xấu, vì vậy hãy tạo kiểu cho nó:

 . Back-to-top {
  vị trí: cố định;
  bên phải: 2rem;
  phía dưới: 2rem;
  bán kính biên giới: 100%;
  nền: # 141c38;
  đệm: 0,5rem;
  biên giới: không có;
  con trỏ: con trỏ;
}  

Tạo kiểu cho nút để nó trông đẹp mắt

Bây giờ, mũi tên lên trong nút của chúng ta không hiển thị, chúng ta hãy thay đổi màu của nó thành màu sáng hơn để nó hiển thị:

 . back-to-top-icon {
  chiều rộng: 1rem;
  chiều cao: 1rem;
  màu: # 7ac9f9;
}  

Đã cập nhật kiểu cho biểu tượng mũi tên của nút Quay lại đầu trang

Chúng tôi cũng có thể thêm hiệu ứng di chuột chỉ để làm cho nó tốt hơn:

 . back-to-top: hover {
  độ mờ: 60%;
}  

Thêm một số kiểu di chuột vào nút

Xem Thêm  Cách căn giữa một hình ảnh trong HTML - mã html cho hình ảnh căn giữa

Bây giờ, đây là giao diện của nút của chúng ta:

Nút Quay lại Đầu trang được tạo kiểu Nút Quay lại Đầu trang

Cách làm cho mục nhập của nút mượt mà hơn

Nút dường như xuất hiện bất cứ khi nào chúng ta cuộn. Hãy thay đổi hành vi này bằng cách thêm một hiệu ứng chuyển đổi cho nó và thay vì thay đổi màn hình, chúng ta sẽ thay đổi độ mờ của nó:

 . Back-to-top {
  vị trí: cố định;
  bên phải: 2rem;
  phía dưới: 2rem;
  bán kính biên giới: 100%;
  nền: # 7ac9f9;
  đệm: 0,5rem;
  biên giới: không có;
  con trỏ: con trỏ;
  độ mờ: 100%;
  chuyển tiếp: độ mờ 0,5s;
}  

Thêm chuyển đổi vào độ mờ của nút

 . hidden {
  độ mờ: 0%;
} 

Đặt lớp ẩn để có độ mờ là 0%

Điều này cũng giúp hiệu ứng di chuột của chúng ta mượt mà hơn.

Bây giờ chúng ta hãy tập trung vào thanh tiến trình của trang.

Cách thêm thanh tiến trình trang vào trang web của bạn

Chúng tôi sẽ tạo thanh tiến trình bằng cách sử dụng div . Khi người dùng cuộn qua trang, chúng tôi sẽ xác định phần trăm được cuộn và tiếp tục tăng width . Trước tiên, hãy thêm div và đặt tên lớp cho nó là process-bar :

  & lt; div class = "process-bar" / & gt;  

Đánh dấu thanh tiến trình cuộn trang

Bây giờ chúng ta sẽ thêm một số kiểu vào nó:

 . thanh tiến trình {
  chiều cao: 1rem;
  nền: trắng;
  vị trí: cố định;
  đầu: 0;
  trái: 0;
}  

Kiểu thanh tiến trình cuộn trang

Chúng tôi đang sửa nó để hiển thị khi người dùng cuộn. Chúng tôi cũng đang định vị nó ở đầu trang.

Bây giờ, hãy thêm JavaScript để đặt chiều rộng của thanh tiến trình:

  const pageProgressBar = document.querySelector (". process-bar")
document.addEventListener ("scroll", () = & gt; {
  const scrolledPercentage =
      (scrollContainer (). scrollTop /
        (scrollContainer (). scrollHeight - scrollContainer (). clientHeight)) *
      100;
  
  pageProgressBar.style.width = `$ {scrolledPercentage}% '
  
  if (scrollContainer (). scrollTop & gt; showOnPx) {
    backToTopButton.classList.remove ("ẩn");
  } khác {
    backToTopButton.classList.add ("ẩn");
  }
});  

Mã để tính toán tỷ lệ phần trăm cuộn và thiết lập bản đồ thanh tiến trình

Lưu ý rằng chúng tôi đang sử dụng chức năng xử lý sự kiện cuộn tài liệu hiện có của chúng tôi.

Đây là cách thanh tiến trình của chúng ta sẽ trông như thế nào khi được cuộn:

Thanh tiến trình cuộn trang trên cuộn Thanh tiến trình cuộn trang trên cuộn

Cách tính phần trăm được cuộn

Tính phần trăm được cuộn thực sự khá đơn giản. Thuộc tính scrollTop ( MDN Reference ) là số pixel được cuộn như đã đề cập trước đó.

scrollHeight ( MDN Reference ) là chiều cao tối thiểu cần thiết để vừa với tất cả các phần tử con của nó trong phần tử mà nó đang được gọi.

Và cuối cùng, clientHeight ( MDN Tham chiếu ) là chiều cao bên trong của phần tử mà nó đang được gọi.

clientHeight bị trừ khỏi scrollHeight vì nếu chúng tôi không làm như vậy, khu vực hiển thị cũng sẽ được tính đến, vì vậy chúng tôi sẽ không bao giờ đạt 100% cuộn.

Tôi đã tổng hợp sơ đồ này để giải thích rõ hơn:

Ảnh chụp màn hình giải thích clientHeight và scrollHeight Ảnh chụp màn hình giải thích clientHeight scrollHeight

Ở đây, dòng không có mũi tên thể hiện clientHeight là chiều cao của nội dung mà chúng tôi có thể nhìn thấy. Dòng có các mũi tên đại diện cho scrollHeight và cho thấy rằng dòng này tiếp tục theo cả hai hướng. Đây là chiều cao của chế độ xem cần thiết để vừa với tất cả nội dung.

Cuối cùng, giá trị scrollTop được chia cho hiệu số của scrollHeight clientHeight và chúng tôi nhận được giá trị thập phân của số tiền được cuộn. Giá trị này được nhân với 100 để nhận giá trị theo phần trăm mà chúng tôi sử dụng để xác định chiều rộng của div , đó là tiến trình trên thanh tiến trình của chúng tôi.

< h2 id = "ending"> Kết luận

Tôi hy vọng bạn thấy bài viết này hữu ích và có thể triển khai Nút Quay lại Đầu trang và Thanh Tiến trình Trang trên trang web của bạn.

Hãy liên hệ với tôi trên Twitter nếu bạn muốn hỏi tôi bất cứ điều gì. Bước tiếp theo sẽ là triển khai điều này trên trang web của bạn và thực hiện các thay đổi khi bạn thấy phù hợp.

Xem Thêm  SQL Server chọn từ thủ tục được lưu trữ (9 Ví dụ) - máy chủ sql chọn từ thủ tục được lưu trữ

Resources

Tôi hiện đang làm việc trong một dự án có tên là DevKit, đây là một PWA sẽ chứa các công cụ dành cho nhà phát triển trong một ứng dụng duy nhất và cung cấp các cách để hoàn thành công việc của bạn một cách nhanh chóng. Hãy khám phá tại https://www.devkit.one/ .


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

Tạo nút trở lại đầu trang(Backtop) bằng Html, Css, Jquery | Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-03-06
  • Đánh giá: 4 ⭐ ( 4604 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nút bấm quay lại đầu trang hay còn gọi là backtop là một chức năng rất quan trọng trong website.
    Nó giúp tăng trải nghiệm người dùng khi đọc nội dụng trên web, vào thời điểm họ muốn quay lại đầu trang họ chỉ cần click vào thì trang web tự động cuộn lên đầu trang mà không cần phải kéo ngược lên mất thời gian.
    Chức năng này tôi sử dụng html, css và jquery nó rất phù hợp với những ai trên hành trình học lập trình web và trên hành trình học xây dựng giao diện website.
    ——
    » » 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 ⭐ ( 9558 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…

Xác Minh Google Webmaster Tools Bằng Cách Tải Tệp Html Lên Trang Web Của Bạn

  • Tác giả: worldlinks.edu.vn
  • Đánh giá: 5 ⭐ ( 9840 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tips:Nếu như bạn là người mới, hoặc chưa thành thạo WordPress, Bạn nên tìm đến khóa học bài bản về WordPress để có lộ trình từng bước vững chắc =>7 giờ học WordPressGoogle Search Console là một công cụ miễn phí từ Google, nó giúp Google hiểu rằng chủ website là bạn, thông báo cho bạn biết quá trình lập chỉ mục và phát hiện lỗi, giúp website được index nhanh hơn khi thêm sitemap, và đặc biệt bạn có thể theo dõi lượng tìm kiếm xem khách hàng tìm những từ khóa gì để vào website bạn

Cách Đưa File Html Lên Web Đơn Giản Và Đưa Lên Internet, Tạo Trang Web Đơn Giản Và Đưa Lên Internet

  • Tác giả: ehefs.org
  • Đánh giá: 3 ⭐ ( 1486 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, mình sẽ hướng dẫn bạn cách đưa một trang web đơn giản lên host miễn phí, Ở đây, mình dùng một host được cung cấp bởi: https://www

Buộc vị trí cuộn trang lên đầu tại làm mới trang trong HTML

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 3320 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể làm điều đó bằng phương thức scrollTop trên DOM đã sẵn sàng :…

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

  • Tác giả: www.stdio.vn
  • Đánh giá: 5 ⭐ ( 7256 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.

Phần đầu trang web header

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 8806 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kết hợp các thẻ định dạng và nhóm thẻ inline để giúp các bạn hiểu tốt hơn về HTML/XHTML, Học web chuẩn, học miễn phí thiết kế web bằng html, css, xhtml, css3, html5, jquery, javascript, wordpress, php qua ví dụ mẫu, chuyên đề, cấu trúc, bài học, tham khảo.

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

By ads_php