{{toc numerate=1}}
Should avoid endless scrolling on keyboardless devices on long pages to get back to top.
ToDo
* show only at ##min-height## larger than screen
* seems does not hover over debug div, not visible
* CSS
* symbol
Unicode symbols
⏶∧^⯅⮉△▲▴⯅⏶⏫⇧⇑⬆🔝
SVG
%%
<svg height="48" viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
<path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
<path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
</svg>
%%
===CSS only===
Simpler, less CPU burden.
* https://css-tricks.com/how-to-make-an-unobtrusive-scroll-to-top-button/#comment-1763836
* https://codepen.io/rolandtoth/pen/eMamVK
%%(hl html)
<nav class="totop-button">
<a class="chevron-up" href="#top"></a>
</nav>
%%
%%(hl css)
/* top button */
@media (max-width: 700px) {
.totop-button {
right: 20px;
border-width: 0;
border-style: solid;
border-radius: 100%;
border-color: rgba(255, 255, 255, 1.0);
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
/* right: -100px; */
bottom: 50px;
width: 40px;
height: 40px;
z-index: 1;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 1.0);
background-color: transparent;
transition: all 0.4s ease;
cursor: pointer;
}
/* △ */
.chevron-up:before {
content: "^";
}
a.chevron-up,
a.chevron-up:hover,
a.chevron-up:visited {
color: rgb(51, 51, 51);
text-decoration: none;
margin-top: 5px;
font-style: normal;
line-height: 1;
font-weight: 900;
font-size: large;
width: 100%;
text-align: center;
}
}
%%
===Using JavaScript===
https://css-tricks.com/how-to-make-an-unobtrusive-scroll-to-top-button/
%%(hl html)
<html>
<head>
<style>
.totop-button {
right: 20px;
border-width: 0;
border-style: solid;
border-radius: 100%;
border-color: rgba(255, 255, 255, 1.0);
display: none; /* At first we hide the button */
justify-content: space-around;
align-items: center;
position: fixed;
/* right: -100px; */
bottom: 50px;
width: 40px;
height: 40px;
z-index: 1;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 1.0);
background-color: transparent;
transition: all 0.4s ease;
cursor: pointer;
}
/* △ */
.chevron-up:before {
content: "^";
}
a.chevron-up,
a.chevron-up:hover,
a.chevron-up:visited {
color: rgb(51, 51, 51);
text-decoration: none;
margin-top: 5px;
font-style: normal;
line-height: 1;
font-weight: 900;
font-size: large;
width: 100%;
text-align: center;
}
}
</style>
<script>
function ready(callback){
// in case the document is already rendered
if (document.readyState!='loading') callback();
// modern browsers
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') callback();
});
}
ready(function(){
var offset = 250; // Y offset when we start showing the button
var toTopButton = document.querySelector(".totop-button");
// Show/hide the sctoll top button
window.addEventListener("scroll", function() {
if (window.scrollY > offset) {
toTopButton.style.display = "flex"; // Show button
} else {
toTopButton.style.display = "none"; // Hide button
}
});
// Click event listener
toTopButton.addEventListener("click", function(event) {
event.preventDefault(); // Prevent default action
// Smooth scroll to the top of the page
window.scrollTo({
top: 0, // Go to Y offset = 0
behavior: "smooth" // Nice and smooth
});
return false;
});
});
</script>
</head>
<body>
<div style="height:5000px;">
This is a mockup of a long scrolling page.<br>
Scroll it a bit down to see the button in the bottom right corner.
</div>
<!-- we put the button before the closing </body> tag or somewhere in the bottom
and use href="#" that allows us to scroll top in older browsers -->
<nav class="totop-button">
<a class="chevron-up" href="#"></a>
</nav>
</body>
</html>
%%
===Patches===
* ((commit:3a4d7771a0a5718e08d1aac4b9413d50e05d2dd6 top button))