Khi bạn có nhu cầu tạo ra 1 nút hoặc 1 liên kết mà khi nhấp chuột vào nó sẽ đưa bạn đi đến cuối trang Web thì mã Javascript bên dưới đây sẽ giúp bạn thực hiện ý tưởng đó một cách hoàn hảo.
Mã Javascript
/*****Cuộn xuống cuối trang*******/
let scrollToBottom = document.querySelector('#scroll-to-bottom');
let pageBottom = document.querySelector('#page-bottom');
scrollToBottom.addEventListener('click', function () {
pageBottom.scrollIntoView();
})
Các bạn lưu ý ở đây có mã #page-bottom
, các bạn đặt mã này vào footer Web của bạn có dạng id="#page-bottom"
để khi nhấp chuột, nó sẽ đưa bạn đến phần tử có id="#page-bottom"
Ví dụ:
<p id="page-bottom" style="text-align: center;"><span style="font-size: 12px; color: #ffffff;"></span></p>
Đặt mã trên ở File footer.php
hoặc ở bất kỳ đâu, miễn là nó thuộc phần chân trang Web của bạn.
Tạo nút hiển thị để nhấp chuột
<div style="vertical-align: middle; text-align: center;">
<button role="button"><a style="color: #f60c27;" id="scroll-to-bottom" type="button" ><i class="fa fa-chevron-down" aria-hidden="true"></i> Cuộn xuống cuối trang</a></button>
</div>
Kết quả:
Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!
Hữu ích cho bạn:
- Javascript sao chép URL hiện tại của trang
- Javascript tự động hiện 1 phần tử sau thời gian nhất định
- Javascript tự ‘Go Back’ sau thời gian nhất định
- Cách tạo vòng tròn Loading với hiệu ứng xoay vòng với CSS
- Sao chép văn bản vào Clipboard trong JavaScript đơn giản nhất
- Sao chép văn bản vào Clipboard bằng Javascript và CSS
- Tự động đóng trang sau thời gian cụ thể bằng Javascript
- Java tự động chuyển trang hoặc tải File sau thời gian cài đặt
- Tạo thanh tiến trình theo giây đơn giản bằng JavaScript
- Bạn có biết JavaScript là gì không?
- JavaScript đếm ngược đơn giản nhất
- Nút Javascript làm mới trang
- Mã Javascript kèm Link gốc bài viết khi có khách Copy nội dung