";var nuttaibut = "<\/i> T\u1ea3i th\u00eam<\/span>"; Tạo nút trở về đầu trang vô cùng đơn giản back to top Trang chủGiới thiệuBlogPhần mềmThủ thuậtTiện íchRút gọn liên kếtVòng quay may mắnLiên hệ HomePhần mềmTạo nút trở về đầu trang vô cùng đơn giản back to top Nguyễn Văn Luyến 4 năm trướcTạo nút trở về đầu trang vô cùng đơn giản back to top Mục lụcCác bạn truy cập các website, bạn có để ý thấy, hễ ta kéo bài viết xuống một khoảng nhất định, thì wesite sẽ hiển thị một nút ảo trên màn hình, thì nút ảo này cho phép chúng ta click vào để trở về nhanh phần đầu của trang web. Thì đây là một tính năng nhỏ, nhưng vô cùng tiện ích gọi là back to top. Sau đây mình sẽ hướng dẫn các bạn cách làm cái nút ảo back to top này bằng cách thêm vào website của bạn một đoạn code ngắn.Hình trên chính là hình ảnh mô tả chiếc nút back to top vô cùng tiện ích mà các bạn sẽ làm sau đây.Code tạo nút back to topĐầu tiên bạn sao chép đoạn code bên dưới rồi dán vào code website của bạn, cứ cho nó nằm dưới thẻ là được. Nếu bạn đang sử dụng WordPress, thì tìm tới file header.php trong thư mục theme mà bạn đang sử dụng rồi dán code dưới thẻ . window.onscroll = function() {scrollFunction()};function scrollFunction() {if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {document.getElementById("myBtn").style.display = "block";} else {document.getElementById("myBtn").style.display = "none";}}document.getElementById('myBtn').addEventListener("click", function(){document.body.scrollTop = 0;document.documentElement.scrollTop = 0;});…/images/len.png’ bạn thay thế đường dẫn hình ảnh biểu tượng nút lên của bạn.Thêm đoạn css sau vào file style.css. ngoài ra bạn củng có thể cho đoạn css này vào thẻ rồi đặt nó nằm dưới đoạn code ở trên./* Mui ten lên dau trang */#myBtn {display: none; position: fixed;bottom: 60px;right: 10px; z-index: 99; border: none;outline: none;background-color: #fff;border: 2px solid #ccc;color: white;cursor: pointer;border-radius: 30px;opacity: 0.7;}#myBtn:hover {background-color: #f1f1f1;}bottom: 60px; bạn có thể sửa lại thông số khoảng cách chiếc nút từ dưới lên là bao nhiêu px;right: 10px; Khoảng cách từ mép phải ra là bao nhiêu px;Sau khi làm xong các bước trên, lưu lại hoàn thành, bây giờ hãy mở trang web của bạn lên để xem kết quả nhé. Chúc các bạn thành công!Nguồn: //caodem.com/tao-nut-tro-ve-dau-trang-vo-cung-don-gian-back-to-top/Thẻ: back top top • Code cho Wordpress • Code hay7 lượt xem | 0 bình luận Nguyễn Văn LuyếnLuôn luôn lắng nghe, lâu lâu mới hiểu Đề xuất cho bạnHướng dẫn sử dụng công cụ ký số văn bản theo Nghị định 30/2020/NĐ-CP 2 tháng trướcPhần mềm Winamp phần mềm phát nhạc một thời đã “hồi sinh” 2 tháng trướcPhần mềm chụp màn hình và ghi chú nhanh Snap IT 7 tháng trướcvnTools – Công cụ hỗ trợ chuyển chữ hoa, chữ thường, đọc số thành số…. 8 tháng trướcQuy định mới về đào tạo lái xe hạng B1, B2, C áp dụng từ ngày 1.6.2024 8 tháng trướcỨng dụng Mô phỏng 120 tình huống giao thông trên điện thoại V2.0.0 10 tháng trướcBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.0 10 tháng trướcHướng dẫn cập nhật phần mềm ÔN TẬP MÔ PHỎNG từ phiên bản v1.2.2 lên v1.2.3 1 năm trước MiniTool Power Data Recovery V9.0 Business Technician – Phần mềm phục hồi dữ liệu Share bộ Template PowerPoint siêu đẹp Rubick ASUS được xếp hạng Top 2 thương hiệu laptop tốt nhất năm 2019 Bình luận gần đâyAddin Word xuất Mail Merge có chức năng cắt ra…Nguyễn Văn Luyến 6 tháng trướcƯng dụng này rất hay cho người hay thực hiện các biểu mâu, thư mời,...Quy định mới về đào tạo lái xe hạng B1,…Nguyễn Văn Luyến 7 tháng trướcChuẩn bị lại lên giáTiện ích tiếng Việt trên Word năm 2022 miễn phíChuyển Đổi Số 12 tháng trướcCó trang nguồn mình tải á, bạn qua trang đó xem thử. Mình cài được bình thường áFont chữ thư pháp FZ Tiểu Tự Việt HoáChuyển Đổi Số 12 tháng trướcMỉnh cũng thấy cái gì hay hay lưu lại trên trang cá nhân khi nào cần lấy ra dùng thôi à. Cảm ơn bạn nhiều!Font chữ thư pháp FZ Tiểu Tự Việt Hoáquang tuấn 12 tháng trướcok cám ơn addTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcsao không thấy hướng dẫn khắc phục lỗi the macro vậyTiện ích tiếng Việt trên Word năm 2022 miễn phíĐàm kiên 1 năm trướcfile tải về chỉ có 3 file hướng dẫn chứ không có file cài đặt nhéGoogle tung dấu tick xanh trong GmailNguyễn Văn Luyến 2 năm trướcBài viết hay Có nhiều lượt xemNewspaper v9.0 Premium WordPress Themes1384 lượt xemBộ cài đặt phần mềm ÔN TẬP MÔ PHỎNG phiên bản V2.0.01263 lượt xemTiện ích tiếng Việt trên Word năm 2022 miễn phí1137 lượt xemAddin Word xuất Mail Merge có chức năng cắt ra nhiều file và gửi mail777 lượt xemFont chữ thư pháp FZ Tiểu Tự Việt Hoá696 lượt xemZaloMessengerEmailZaloMessengerEmail Trang chủ Zalo Hỗ trợ Messenger Liên hệ Đồng ý Cookie Trang web này sử dụng Cookie để nâng cao trải nghiệm duyệt web của bạn và cung cấp các đề xuất được cá nhân hóa. Bằng cách chấp nhận để sử dụng trang web của chúng tôi Tôi chấp nhận
Các bạn truy cập các website, bạn có để ý thấy, hễ ta kéo bài viết xuống một khoảng nhất định, thì wesite sẽ hiển thị một nút ảo trên màn hình, thì nút ảo này cho phép chúng ta click vào để trở về nhanh phần đầu của trang web. Thì đây là một tính năng nhỏ, nhưng vô cùng tiện ích gọi là back to top. Sau đây mình sẽ hướng dẫn các bạn cách làm cái nút ảo back to top này bằng cách thêm vào website của bạn một đoạn code ngắn.
Đầu tiên bạn sao chép đoạn code bên dưới rồi dán vào code website của bạn, cứ cho nó nằm dưới thẻ
là được. Nếu bạn đang sử dụng WordPress, thì tìm tới file header.php trong thư mục theme mà bạn đang sử dụng rồi dán code dưới thẻ
.
window.onscroll = function() {scrollFunction()};function scrollFunction() {if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {document.getElementById("myBtn").style.display = "block";} else {document.getElementById("myBtn").style.display = "none";}}document.getElementById('myBtn').addEventListener("click", function(){document.body.scrollTop = 0;document.documentElement.scrollTop = 0;});
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {document.getElementById("myBtn").style.display = "block";} else {document.getElementById("myBtn").style.display = "none";}}
document.getElementById('myBtn').addEventListener("click", function(){document.body.scrollTop = 0;document.documentElement.scrollTop = 0;});
…/images/len.png’ bạn thay thế đường dẫn hình ảnh biểu tượng nút lên của bạn.
Thêm đoạn css sau vào file style.css. ngoài ra bạn củng có thể cho đoạn css này vào thẻ
rồi đặt nó nằm dưới đoạn code ở trên.
/* Mui ten lên dau trang */#myBtn {display: none; position: fixed;bottom: 60px;right: 10px; z-index: 99; border: none;outline: none;background-color: #fff;border: 2px solid #ccc;color: white;cursor: pointer;border-radius: 30px;opacity: 0.7;}#myBtn:hover {background-color: #f1f1f1;}
#myBtn:hover {background-color: #f1f1f1;}
bottom: 60px; bạn có thể sửa lại thông số khoảng cách chiếc nút từ dưới lên là bao nhiêu px;right: 10px; Khoảng cách từ mép phải ra là bao nhiêu px;
Sau khi làm xong các bước trên, lưu lại hoàn thành, bây giờ hãy mở trang web của bạn lên để xem kết quả nhé. Chúc các bạn thành công!
Nguồn: //caodem.com/tao-nut-tro-ve-dau-trang-vo-cung-don-gian-back-to-top/