diff --git a/_includes/scroll-to-top.html b/_includes/scroll-to-top.html index 1002ca6..ba9b812 100644 --- a/_includes/scroll-to-top.html +++ b/_includes/scroll-to-top.html @@ -1,35 +1,45 @@ - - - Back to top - - - + + Back to top + + + + + function onScroll() { + btn.style.display = getScrolled() > 300 ? "block" : "none"; + } + + 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 }); + +})(); + \ No newline at end of file diff --git a/_sass/_custom.scss b/_sass/_custom.scss index 657e361..f953a1e 100644 --- a/_sass/_custom.scss +++ b/_sass/_custom.scss @@ -1265,15 +1265,18 @@ figure { } /* ============================================================================ - SCROLL TO TOP - FULL STYLING (all viewports) + SCROLL TO TOP ============================================================================ */ #scroll-to-top { position: fixed; bottom: 4.5rem; right: 1rem; - z-index: 9999; - transition: transform 0.2s ease, box-shadow 0.2s ease; + z-index: 9999; + display: none; + touch-action: manipulation; + cursor: pointer; + -webkit-tap-highlight-color: transparent; } #scroll-to-top:hover {