docs: added scroll-to-top button with JS and CSS

This commit is contained in:
DaleStack 2025-08-01 02:32:49 +08:00
parent 85cc710464
commit a486b9025e
3 changed files with 36 additions and 0 deletions

15
docs/_static/scrolltop.css vendored Normal file
View file

@ -0,0 +1,15 @@
#scrollToTop {
position: fixed;
top: 20px;
right: 20px;
background-color: #5EABD6;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
z-index: 1000;
display: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

17
docs/_static/scrolltop.js vendored Normal file
View file

@ -0,0 +1,17 @@
window.addEventListener("scroll", function () {
const btn = document.getElementById("scrollToTop");
btn.style.display = window.scrollY > 300 ? "block" : "none";
});
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
document.addEventListener("DOMContentLoaded", () => {
const btn = document.createElement("button");
btn.id = "scrollToTop";
btn.textContent = "↑ Top";
btn.setAttribute("aria-label", "Scroll to top");
btn.onclick = scrollToTop;
document.body.appendChild(btn);
});

View file

@ -62,6 +62,10 @@ html_favicon = "_static/flask-icon.svg"
html_logo = "_static/flask-logo.svg"
html_title = f"Flask Documentation ({version})"
html_show_sourcelink = False
html_static_path = ['_static']
html_js_files = ['scrolltop.js']
html_css_files = ['scrolltop.css']
gettext_uuid = True
gettext_compact = False