Merge pull request #256 from flotiq/feature/24662-scroll-to-top-butto…

…n-improvements Scroll to top button adjustments
flotiq · Jun 7, 2024 · 419a12a · 419a12a
2 parents 7a8721b + dbb105c
commit 419a12a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/docs/css/flotiq.css b/docs/css/flotiq.css
@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 .md-grid {
   max-width: 70rem;
 }
@@ -695,3 +699,11 @@ li.md-nav__item.md-nav__item--active:not(.md-nav__item--nested) {
 .md-typeset h1:target, .md-typeset h2:target, .md-typeset h3:target {
   --md-scroll-offset: -1rem;
 }
+
+/*
+!* Scroll to top button visibility improvements *!
+
+body:not(.md--top) .md-icon--top {
+  opacity: 1 !important;
+}
+*/
diff --git a/docs/js/flotiq.js b/docs/js/flotiq.js
@@ -127,3 +127,18 @@ document.addEventListener("DOMContentLoaded", function (event) {
 });
 
 addHelpfulForm();
+
+// Scroll to top Button always visible
+document.querySelector(".md-top").addEventListener("click", function(event) {
+    event.preventDefault();
+    window.scrollTo({top: 0, behavior: 'smooth'});
+});
+
+document.addEventListener('scroll', function() {
+    var topButton = document.querySelector(".md-top");
+    if(window.scrollY === 0){
+        topButton.setAttribute("hidden", true);
+    } else {
+        topButton.removeAttribute('hidden');
+    }
+});