docs: added scroll-to-top button with JS and CSS
This commit is contained in:
parent
85cc710464
commit
a486b9025e
3 changed files with 36 additions and 0 deletions
15
docs/_static/scrolltop.css
vendored
Normal file
15
docs/_static/scrolltop.css
vendored
Normal 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
17
docs/_static/scrolltop.js
vendored
Normal 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);
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue