Embedded Files
<html><head><base href="https://webbox-ai.vercel.app/scroll-to-top-and-bottom/" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Scroll to Top and Bottom</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
h1 {
text-align: center;
color: #333;
}
.scroll-button {
position: fixed;
right: 20px;
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: opacity 0.3s, background-color 0.3s;
z-index: 1000;
}
.scroll-button:hover {
background-color: #45a049;
}
.scroll-to-bottom-button {
top: 20px;
}
.scroll-to-top-button {
bottom: 20px;
display: none;
}
.loader {
display: none;
text-align: center;
font-size: 18px;
color: #666;
margin: 20px 0;
}
.loader.show-loader {
display: block;
}
.users-list {
list-style-type: none;
padding: 0;
}
.users-list li {
background-color: white;
margin-bottom: 10px;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.users-list li:hover {
transform: translateY(-3px);
}
.users-list.hide-users-list {
display: none;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.users-list li {
animation: fadeIn 0.5s ease-out;
}
@media (max-width: 600px) {
.scroll-button {
padding: 8px 12px;
font-size: 14px;
}
}
</style>
</head>
<body>
<h1>Scroll to Top and Bottom</h1>
<button class="scroll-button scroll-to-bottom-button">Scroll To Bottom</button>
<div class="loader">Loading Data! Please wait...</div>
<ul class="users-list"></ul>
<button class="scroll-button scroll-to-top-button">Scroll to Top</button>
<script>
const usersList = document.querySelector(".users-list");
const loader = document.querySelector(".loader");
const scrollToTopButton = document.querySelector(".scroll-to-top-button");
const scrollToBottomButton = document.querySelector('.scroll-to-bottom-button');
function showLoader() {
loader.classList.add("show-loader");
usersList.classList.add("hide-users-list");
}
function removeLoader() {
loader.classList.remove("show-loader");
usersList.classList.remove("hide-users-list");
}
async function fetchUsersList() {
showLoader();
try {
const response = await fetch("https://dummyjson.com/users?limit=100", {
method: "GET",
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result && result.users) {
displayUsersList(result.users);
} else {
throw new Error('No users data in the response');
}
} catch (error) {
console.error("There was a problem fetching the users:", error);
usersList.innerHTML = `<li>Error loading users. Please try again later.</li>`;
} finally {
removeLoader();
}
}
function displayUsersList(getUsers) {
usersList.innerHTML = getUsers
.map((userItem, index) => `
<li style="animation-delay: ${index * 50}ms">
<p>${userItem.firstName} ${userItem.lastName}</p>
<p>Email: ${userItem.email}</p>
<p>Age: ${userItem.age}</p>
</li>
`)
.join("");
}
fetchUsersList();
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
function scrollToBottom() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
}
scrollToTopButton.addEventListener("click", scrollToTop);
scrollToBottomButton.addEventListener('click', scrollToBottom);
// Show/hide scroll to top button based on scroll position
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
scrollToTopButton.style.display = 'block';
} else {
scrollToTopButton.style.display = 'none';
}
});
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'ArrowUp') {
e.preventDefault();
scrollToTop();
} else if (e.ctrlKey && e.key === 'ArrowDown') {
e.preventDefault();
scrollToBottom();
}
});
</script>
</body>
</html>
Page updated
Google Sites
Report abuse