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();
|
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
|
// Keyboard shortcuts
|
||||||
function initKeyboardShortcuts() {
|
function initKeyboardShortcuts() {
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
|
|
@ -128,8 +101,7 @@ function initKeyboardShortcuts() {
|
||||||
|
|
||||||
// Add form submission handlers
|
// Add form submission handlers
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
// Initialize scroll to top and keyboard shortcuts
|
// Initialize keyboard shortcuts
|
||||||
initScrollToTop();
|
|
||||||
initKeyboardShortcuts();
|
initKeyboardShortcuts();
|
||||||
|
|
||||||
// Handle all form submissions
|
// Handle all form submissions
|
||||||
|
|
|
||||||
|
|
@ -488,38 +488,22 @@ p.thread-info {
|
||||||
content: "← ";
|
content: "← ";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scroll to top button */
|
/* Loading spinner */
|
||||||
.scroll-to-top {
|
.spinner {
|
||||||
position: fixed;
|
display: inline-block;
|
||||||
bottom: 30px;
|
width: 16px;
|
||||||
right: 30px;
|
height: 16px;
|
||||||
width: 50px;
|
border: 3px solid #fef6e4;
|
||||||
height: 50px;
|
border-top: 3px solid #001858;
|
||||||
background-color: #001858;
|
|
||||||
color: #fef6e4;
|
|
||||||
border: 2px solid #001858;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
animation: spin 0.8s linear infinite;
|
||||||
opacity: 0;
|
margin-left: 8px;
|
||||||
visibility: hidden;
|
vertical-align: middle;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-to-top.visible {
|
@keyframes spin {
|
||||||
opacity: 0.8;
|
0% { transform: rotate(0deg); }
|
||||||
visibility: visible;
|
100% { transform: rotate(360deg); }
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-to-top:hover {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
background-color: #8bd3dd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
@ -545,34 +529,6 @@ p.thread-info {
|
||||||
background-color: #8bd3dd;
|
background-color: #8bd3dd;
|
||||||
color: #001858;
|
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 state for buttons */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue