fianlly fixed STT button (window scroll event fixes)
This commit is contained in:
@@ -1,35 +1,45 @@
|
|||||||
<script>
|
<a href="#"
|
||||||
// When the user scrolls down from the top of the document, show the button
|
id="scroll-to-top"
|
||||||
window.onscroll = function () {
|
class="btn btn-link"
|
||||||
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
|
title="Back to Top"
|
||||||
document.getElementById("scroll-to-top").style.display = "block";
|
aria-label="Back to top">
|
||||||
} else {
|
|
||||||
document.getElementById("scroll-to-top").style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<a href="javascript:void(0)" id="scroll-to-top" class="btn btn-link" title="Back to Top">
|
|
||||||
<span class="visually-hidden">Back to top</span>
|
<span class="visually-hidden">Back to top</span>
|
||||||
<svg class="bi icon-sprite" role="img" aria-label="Up Arrow">
|
<svg class="bi icon-sprite" role="img" aria-label="Up Arrow">
|
||||||
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-back-to-top"/>
|
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-back-to-top"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const scrollBtn = document.getElementById("scroll-to-top");
|
(function() {
|
||||||
|
var btn = document.getElementById("scroll-to-top");
|
||||||
|
if (!btn) return;
|
||||||
|
|
||||||
window.addEventListener("scroll", function () {
|
function getScrolled() {
|
||||||
if (window.scrollY > 500) {
|
return window.scrollY
|
||||||
scrollBtn.style.display = "block";
|
|| document.documentElement.scrollTop
|
||||||
} else {
|
|| document.body.scrollTop
|
||||||
scrollBtn.style.display = "none";
|
|| 0;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
scrollBtn.addEventListener("click", function () {
|
function onScroll() {
|
||||||
window.scrollTo({
|
btn.style.display = getScrolled() > 300 ? "block" : "none";
|
||||||
top: 0,
|
}
|
||||||
left: 0,
|
|
||||||
behavior: "smooth"
|
window.addEventListener("scroll", onScroll, { passive: true });
|
||||||
});
|
document.addEventListener("scroll", onScroll, { passive: true });
|
||||||
});
|
document.body.addEventListener("scroll", onScroll, { passive: true });
|
||||||
|
|
||||||
|
function scrollToTop(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
try { window.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
|
||||||
|
try { document.documentElement.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
|
||||||
|
try { document.body.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.addEventListener("click", scrollToTop);
|
||||||
|
btn.addEventListener("touchend", scrollToTop, { passive: false });
|
||||||
|
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
@@ -1265,7 +1265,7 @@ figure {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================================
|
/* ============================================================================
|
||||||
SCROLL TO TOP - FULL STYLING (all viewports)
|
SCROLL TO TOP
|
||||||
============================================================================ */
|
============================================================================ */
|
||||||
|
|
||||||
#scroll-to-top {
|
#scroll-to-top {
|
||||||
@@ -1273,7 +1273,10 @@ figure {
|
|||||||
bottom: 4.5rem;
|
bottom: 4.5rem;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
display: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scroll-to-top:hover {
|
#scroll-to-top:hover {
|
||||||
|
|||||||
Reference in New Issue
Block a user