Remove scroll-to-top button
Removed the floating scroll-to-top button that appeared in the bottom-right corner of pages after scrolling down. Changes: - Removed .scroll-to-top CSS styles from static/style.css - Removed initScrollToTop() function from static/app.js - Removed function call from initialization - Cleaned up dark mode styles for scroll-to-top The scroll-to-top functionality is still available via keyboard (Home key) and browser default behavior.jocadbz
parent
39b1ea10f4
commit
9749457e2f
|
|
@ -68,33 +68,6 @@ if (document.readyState === 'loading') {
|
|||
initRelativeTimestamps();
|
||||
}
|
||||
|
||||
// Scroll to top button functionality
|
||||
function initScrollToTop() {
|
||||
const scrollButton = document.createElement('button');
|
||||
scrollButton.className = 'scroll-to-top';
|
||||
scrollButton.innerHTML = '↑';
|
||||
scrollButton.setAttribute('aria-label', 'Scroll to top');
|
||||
scrollButton.title = 'Scroll to top';
|
||||
document.body.appendChild(scrollButton);
|
||||
|
||||
// Show/hide button based on scroll position
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
scrollButton.classList.add('visible');
|
||||
} else {
|
||||
scrollButton.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to top when clicked
|
||||
scrollButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
function initKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
|
|
@ -128,8 +101,7 @@ function initKeyboardShortcuts() {
|
|||
|
||||
// Add form submission handlers
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize scroll to top and keyboard shortcuts
|
||||
initScrollToTop();
|
||||
// Initialize keyboard shortcuts
|
||||
initKeyboardShortcuts();
|
||||
|
||||
// Handle all form submissions
|
||||
|
|
|
|||
|
|
@ -488,38 +488,22 @@ p.thread-info {
|
|||
content: "← ";
|
||||
}
|
||||
|
||||
/* Scroll to top button */
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #001858;
|
||||
color: #fef6e4;
|
||||
border: 2px solid #001858;
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid #fef6e4;
|
||||
border-top: 3px solid #001858;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.scroll-to-top.visible {
|
||||
opacity: 0.8;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.scroll-to-top:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
background-color: #8bd3dd;
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -545,34 +529,6 @@ p.thread-info {
|
|||
background-color: #8bd3dd;
|
||||
color: #001858;
|
||||
}
|
||||
|
||||
.scroll-to-top {
|
||||
background-color: #fef6e4;
|
||||
color: #001858;
|
||||
border-color: #fef6e4;
|
||||
}
|
||||
|
||||
.scroll-to-top:hover {
|
||||
background-color: #8bd3dd;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid #fef6e4;
|
||||
border-top: 3px solid #001858;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Loading state for buttons */
|
||||
|
|
|
|||
Loading…
Reference in New Issue