Cách tạo nút quay lại đầu trang và thanh tiến trình trang bằng HTML, CSS và JavaScript – trở lại 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

Bạn đang xem: quay lại trang

Có thể bạn đã đã 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 cơ thể đủ 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 đang thực hiện để 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 lớn để có thể cuộn trang web:

  body {
  chiều cao: 5000px;
}  

Phần 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 phần thân 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- đầu trang "& 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à 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 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;
}  

Ẩn lớp 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ề document.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  Tự học Python Cơ Bản Trong 10 phút - tự học python

Ở đâ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ì ngoài số pixel mà phần tử đó đã được cuộn từ trên cùng.

Ở đâ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 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"
    điền = "không có"
    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 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 để có thể nhìn thấy được:

 . 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  Xóa phần tử khỏi DANH SÁCH Python [clear, pop, remove, del] - xóa phần tử khỏi danh sách python

Bây giờ, đây là cách nút của chúng ta sẽ trông như thế nào:

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 bắt buộc để 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 được trừ khỏi scrollHeight bởi vì nếu chúng tôi không làm điều đó, 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 được 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 với 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.

Xem Thêm  Cách viết hàm đệ quy bằng Python - cách viết một hàm đệ quy trong python

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.

Resources

Tôi hiện đang làm việc trong một dự án có tên là DevKit, 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ủ đề trở lại trang

[ MV HD ] Những nụ cười trở lại – Huyền Trang & Tiến Trung

alt

  • Tác giả: Sao Media
  • Ngày đăng: 2013-01-08
  • Đánh giá: 4 ⭐ ( 3707 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.facebook.com/saomedia.vn

    =========================================
    Công ty TYNHH Quảng cáo và truyền thông SAO NGỌC
    Address: 55 Yên Bái – Đà Nẵng – Việt Nam
    Tel: 0905171755 – 0905578777

    Những kỉ niệm gọi nhau trong trí nhớ…
    Đường thênh thang bạn thân kéo nhau về…
    Bốn phuơng trời gọi nhau vang tiếng cười…
    Bao âu lo giờ đây cũng xin ngừng…
    Có một người giờ đây đã quá lớn…
    Một người kia giờ đây vẫn âm thầm….
    Có một người về đâu nơi cuối trời…
    Nghe đâu đây còn vang tên nhau…

Họa tiết chấm bi “kẻ phát cuồng, người thù ghét” đã trở lại

  • Tác giả: www.elle.vn
  • Đánh giá: 5 ⭐ ( 5210 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Họa tiết chấm bi luôn được Hoàng gia Anh yêu thích. Nó góp phần định hình phong cách thời trang của Công nương Diana và Công nương Kate.

Thế giới quay trở lại với than – nỗ lực giảm khí thải chậm lại?

  • Tác giả: bnews.vn
  • Đánh giá: 3 ⭐ ( 3149 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một thế giới “đói” năng lượng đang quay lại sử dụng than đá do tình trạng thiếu khí đốt tự nhiên và dầu mỏ trở nên trầm trọng hơn sau khi Nga triển khai chiến dịch quân sự đặc biệt tại Ukraine.

Mỹ: California cân nhắc bắt buộc đeo khẩu trang trở lại để phòng dịch COVID-19

  • Tác giả: truyenhinhthanhhoa.vn
  • Đánh giá: 3 ⭐ ( 7369 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới chức y tế tại bang California (Mỹ) đang cân nhắc khả năng tái áp đặt quy định bắt buộc đeo khẩu trang trong không gian kín do số ca mắc COVID-19 đang tiếp tục gia tăng vì các biến thể BA.4 và BA.5.
      Đài Phát thanh và Truyền hình Thanh Hóa là đơn vị sự nghiệp thuộc UBND tỉnh Thanh Hóa, đảm nhiệm 2 tờ báo lớn của tỉnh là báo hình và báo nói, có chức năng thông tin, tuyên truyền chủ trương đường lối, chính sách, pháp luật của Đảng và Nhà nước, quản lý thống nhất kỹ thuật phát thanh truyền hình trên địa bàn tỉnh.

Gen Z châm ngòi cho sự trở lại của thời trang Y2K

  • Tác giả: dantri.com.vn
  • Đánh giá: 3 ⭐ ( 2591 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: (Dân trí) – Xu hướng thời trang liên tục thay đổi nhưng cũng trở lại theo chu kỳ 2-3 thập kỷ, do sự thay đổi thế hệ cũng như việc các nhà thiết kế lấy ý

Onclick javascript để làm cho trình duyệt quay trở lại trang trước?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7072 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Thêm phần này vào phần tử đầu vào của bạn

Mang tính năng lùi trang (Backspace) trở lại Chrome

  • Tác giả: trainghiemso.vn
  • Đánh giá: 3 ⭐ ( 4276 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn muốn mở lại trang trước với phím Backspace trên Chrome mà Google đã loại bỏ thì hãy xem bài viết sau đây.

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