Hướng dẫn tạo nút cuộn Scroll trên trang web
Trong quá trình thiết kế website thì việc tạo nút cuộn Scroll Top và Scroll Bottom là rất cần thiết để giúp người dùng dễ dàng di chuyển lên đầu trang và cuối trang. Khi người dùng lăn chuột sẽ mất thời gian do đó chúng ta sẽ viết code để khi người dùng đang ở phía trên trang thì xuất hiện nút lệnh Scroll Bottom và khi đang ở phía dưới thì sẽ xuất hiện nút lệnh Scroll Top.
Sau đây VniTeach sẽ hướng dẫn bạn tạo nút cuộn Scroll trên trang web bằng ngôn ngữ: HTML, CSS và JavaScript.
Đầu tiên, bạn thiết kế trang index.php có các phần nội dung cơ bản như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Buttons</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="content">
<!-- Your content here -->
<?php
// Your PHP-generated content here
?>
</div>
<button id="scroll-top-btn">Scroll to Top</button>
<button id="scroll-bottom-btn">Scroll to Bottom</button>
<script src="script.js"></script>
</body>
</html>Tiếp theo tạo tệp styles.css cùng thư mục với tệp index.php như sau:
#scroll-top-btn, #scroll-bottom-btn {
display: none;
position: fixed;
z-index: 999;
cursor: pointer;
}
#scroll-top-btn:hover,
#scroll-bottom-btn:hover {
background-color: #f0f0f0; /* Thay đổi màu nền khi rê chuột lên */
color: #333; /* Thay đổi màu chữ khi rê chuột lên */
}
#scroll-top-btn {
bottom: 20px;
right: 20px;
}
#scroll-bottom-btn {
top: 20px;
right: 20px;
}Cuối cùng bạn tạo tệp JavaScript với tên script.js cùng thư mục với 02 tệp trên.
// Function to update the visibility of scroll buttons
function updateScrollButtons() {
var scrollPosition = window.scrollY;
var windowHeight = window.innerHeight;
var documentHeight = document.documentElement.scrollHeight;
var scrollTopButton = document.getElementById('scroll-top-btn');
var scrollBottomButton = document.getElementById('scroll-bottom-btn');
if (scrollPosition < documentHeight / 2) {
scrollBottomButton.style.display = 'block';
scrollTopButton.style.display = 'none';
} else {
scrollBottomButton.style.display = 'none';
scrollTopButton.style.display = 'block';
}
}
// Add event listener for scroll event
window.addEventListener('scroll', updateScrollButtons);
// Add event listener for click event on scroll top button
document.getElementById('scroll-top-btn').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Add event listener for click event on scroll bottom button
document.getElementById('scroll-bottom-btn').addEventListener('click', function() {
window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
});
// Update scroll button visibility when the page is loaded
updateScrollButtons();Tất nhiên để có thể cuộn được thì nội dung trang web của bạn phải dài hơn một trang nhé.
Chúc bạn thành công!