Thay đổi vị trí button back to top
Website của bạn đang build bằng Elementor và Theme không hỗ trợ sẵn nút back to top, bạn cũng không muốn cài thêm plugin chỉ để thêm một cái nút quay về đầu trang. Hãy sử dụng ngay Elementor để tạo một nút back to top rất nhanh và đơn giản nhé. Show Cách dễ nhất là thêm một icon hoặc button vào footer template vì footer sẽ được hiện thị trên toàn bộ các bài viết, trang của website. Sau khi thêm icon thì tới phần chỉnh sửa nội dung của icon. Trong phần chỉnh sửa nội dung các bạn có thể thêm bất kì icon nào mình thích từ thư viện hoặc tự upload lên. Tiếp theo là chỉnh sửa style cho icon như màu sắc, kích thước… Sau khi tùy biến giao diện nút back to top ta chuyển sang gán id và chỉnh sửa vị trí icon trong phần Advanced. Các bạn nhớ tùy chỉnh vị trí cho cả giao diện mobile nữa nhé. Sau khi thêm nút back top top và chỉnh sửa giao diện cũng như vị trí cho nó, bước cuối cùng chúng ta thêm một đoạn mã Javascript và CSS để điều khiển nút này khi nào cần xuất hiện/mất đi và hiệu ứng khi xuấy hiện/mất đi Để thêm đoạn mã javascript và CSS này chúng ta thêm widget html vào bất kì đâu trong footer template. Các bạn copy toàn bộ đoạn mã sau vào trong widget HTML nhé. Sau khi hoàn thành các bước trên, nhớ update Footer template và Reload lại trang web của bạn để kiểm tra nhé. Các bạn cũng có thể tùy biến đoạn mã điều khiển trên theo ý thích miễn là cái nut back to top vẫn hoạt động là được 😀 Scroll to top button là button được sử dụng để cuộn trang về đầu 1 cách nhanh chóng, tạo nên tiện ích cho người dùng. Scroll to top buttonDemo được viết trên một trang html, sử dụng thư viện Font Awesome và jQuery. Có thể chia thành 3 phần như sau để tiện hình dung công việc:
Tạo buttonclass="button_scroll2top"
onclick="page_scroll2top()" Hình dạng sơ khai của button: Định nghĩa class Tạo CSS cho buttonDòng Tạo sự kiện clickHàm 0 được gắn class 1 sẽ được hiển thị. Learn how to create a "scroll back to top" button with CSS. Try it Yourself » How To Create a Scroll To Top ButtonStep 1) Add HTML:Create a button that will take the user to the top of the page when clicked on: ExampleStep 2) Add CSS:Style the button: Example
myBtn {display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ bottom: 20px; /* Place the button at the bottom of the page */ right: 30px; /* Place the button 30px from the right */ z-index: 99; /* Make sure it does not overlap */ border: none; /* Remove borders */ outline: none; /* Remove outline */ background-color: red; /* Set a background color */ color: white; /* Text color */ cursor: pointer; /* Add a mouse pointer on hover */ padding: 15px; /* Some padding */ border-radius: 10px; /* Rounded corners */ font-size: 18px; /* Increase font size */ } myBtn:hover {background-color: 555; /* Add a dark-grey background on hover */} Step 3) Add JavaScript:Example// Get the button: let mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera } Try it Yourself » ★ +1 |