https://bugs.koozali.org/show_bug.cgi?id=13393
Bug ID: 13393
Summary: Add floating buttons that allow back and forward
without loosing scrolled postion.
Classification: Contribs
Product: SME Contribs
Version: Futur
Hardware: ---
OS: ---
Status: CONFIRMED
Severity: normal
Priority: P3
Component: smeserver-mailstats
Assignee: [email protected]
Reporter: [email protected]
QA Contact: [email protected]
Target Milestone: ---
as subject, here is an example of it working:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page 1</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.nav-btn {
position: fixed;
top: 20px;
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
font-size: 16px;
}
.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; }
.nav-btn:hover { background: #0056b3; }
.content {
height: 3000px;
padding: 100px 20px 20px;
line-height: 1.6;
}
h1 { color: #333; }
</style>
</head>
<body>
<button id="prevBtn" class="nav-btn prev"
style="display:none;">Prev</button>
<button id="nextBtn" class="nav-btn next">Next → Page 2</button>
<div class="content">
<h1>Page 1 - Scroll Down to Test</h1>
<p>Scroll way down this page (3000px tall). Notice the Next/Prev
buttons stay fixed at top. Click Next - you'll land back at this exact scroll
position!</p>
<div style="height: 2000px; background: linear-gradient(to bottom,
#f0f8ff, #e6f3ff); margin: 40px 0;">
<p style="padding: 20px; background: white; border-radius:
8px;">Scroll position preserved across pages! [web:49][web:53]</p>
</div>
</div>
<script>
// Save scroll position before navigating
document.getElementById('nextBtn').addEventListener('click', () => {
sessionStorage.setItem('scrollY', window.scrollY);
sessionStorage.setItem('currentPage', 'page1');
window.location.href = 'page2.html';
});
// Restore scroll position on load
window.addEventListener('load', () => {
const savedScroll = sessionStorage.getItem('scrollY');
if (savedScroll !== null) {
window.scrollTo(0, parseInt(savedScroll, 10));
sessionStorage.removeItem('scrollY'); // Clear after restore
}
});
</script>
</body>
</html>
page2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page 2</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.nav-btn {
position: fixed;
top: 20px;
padding: 10px 20px;
background: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
font-size: 16px;
}
.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; }
.nav-btn:hover { opacity: 0.9; }
.content {
height: 3000px;
padding: 100px 20px 20px;
line-height: 1.6;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
h1 { color: #2c3e50; }
</style>
</head>
<body>
<button id="prevBtn" class="nav-btn prev">← Prev</button>
<button id="nextBtn" class="nav-btn next">Next → Page 3</button>
<div class="content">
<h1>Page 2 - Scroll Position Restored!</h1>
<p>You should be scrolled to the same position as Page 1. Buttons
remain fixed. Try scrolling here, then navigate!</p>
<div style="height: 2000px; background: rgba(255,255,255,0.8); margin:
40px 0; padding: 40px; border-radius: 12px;">
<h2>Fixed positioning + scroll preservation working
[web:49][web:52][web:58]</h2>
<p>Works across full page reloads using sessionStorage.</p>
</div>
</div>
<script>
document.getElementById('prevBtn').addEventListener('click', () => {
sessionStorage.setItem('scrollY', window.scrollY);
sessionStorage.setItem('currentPage', 'page2');
window.location.href = 'index.html';
});
document.getElementById('nextBtn').addEventListener('click', () => {
sessionStorage.setItem('scrollY', window.scrollY);
sessionStorage.setItem('currentPage', 'page2');
window.location.href = 'page3.html';
});
window.addEventListener('load', () => {
const savedScroll = sessionStorage.getItem('scrollY');
if (savedScroll !== null) {
setTimeout(() => window.scrollTo(0, parseInt(savedScroll, 10)),
100);
sessionStorage.removeItem('scrollY');
}
});
</script>
</body>
</html>
page3.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page 3</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.nav-btn {
position: fixed;
top: 20px;
padding: 10px 20px;
background: #dc3545;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
font-size: 16px;
}
.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; display: none; }
.nav-btn:hover { background: #c82333; }
.content {
height: 3000px;
padding: 100px 20px 20px;
line-height: 1.6;
}
h1 { color: #721c24; }
</style>
</head>
<body>
<button id="prevBtn" class="nav-btn prev">← Back to Page 2</button>
<div class="content">
<h1>Page 3 - Final Page</h1>
<p>Scroll position preserved again! Only Prev button shown. Perfect for
documentation, galleries, or multi-step forms.</p>
<div style="height: 2500px; background: linear-gradient(to right,
#ff9a9e 0%, #fecfef 50%, #fecfef 100%); margin: 40px 0; padding: 60px;
border-radius: 15px;">
<h2>✅ Success! Fixed buttons + scroll retention works perfectly
[web:50][web:53]</h2>
</div>
</div>
<script>
document.getElementById('prevBtn').addEventListener('click', () => {
sessionStorage.setItem('scrollY', window.scrollY);
window.location.href = 'page2.html';
});
window.addEventListener('load', () => {
const savedScroll = sessionStorage.getItem('scrollY');
if (savedScroll !== null) {
window.scrollTo(0, parseInt(savedScroll, 10));
sessionStorage.removeItem('scrollY');
}
});
</script>
</body>
</html>
--
You are receiving this mail because:
You are the QA Contact for the bug._______________________________________________
Mail for each SME Contribs bug report
To unsubscribe, e-mail [email protected]
Searchable archive at https://lists.contribs.org/mailman/public/contribteam/
