docs: add back to top button (#16979)

* docs: add back to top button * fix: spacing errors of previous commit * docs: update css of scrollup button * docs: add css comments for color * fix: spacing issues of last commit * docs: set the scroll btn to work without js * docs: update previous code * docs: update previous code
eslint · Mar 26, 2023 · e39f28d · e39f28d
1 parent ad9dd6a
commit e39f28d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 6 deletions.
diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ config.lang }}" class="no-js">
+<html lang="{{ config.lang }}" class="no-js" id="site_top">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -154,6 +154,7 @@
     <script src="{{ '/assets/js/focus-visible.js' | url }}"></script>
     <script src="{{ '/assets/js/main.js' | url }}"></script>
     <script src="{{ '/assets/js/tabs.js' | url }}"></script>
+    <script src="{{ '/assets/js/scroll-up-btn.js' | url }}"></script>
     {% include 'partials/analytics.html' %}
 
     {%- if hook == "component-library" -%}

diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
@@ -102,6 +102,9 @@ <h1>{{ title }}</h1>
             {% include "partials/docs-footer.html" %}
         </div>
     </div>
+    <a id="scroll-up-btn" href="#site_top">
+        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"><line x1="12" x2="12" y1="19" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+    </a>
 </div>
 
 <script src="{{ '/assets/js/tabs.js' | url }}"></script>
diff --git a/docs/src/assets/js/scroll-up-btn.js b/docs/src/assets/js/scroll-up-btn.js
@@ -0,0 +1,13 @@
+(function () {
+    const scrollUpBtn = document.getElementById("scroll-up-btn");
+
+    if(window.innerWidth < 1400) {
+        window.addEventListener("scroll", function () {
+            if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
+                scrollUpBtn.style.display = "flex";
+            } else {
+                scrollUpBtn.style.display = "none";
+            }
+        });
+    }
+})();
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
@@ -30,7 +30,7 @@ html {
     grid-row: 1 / 2;
     padding-top: var(--space-l-xl);
     padding-block-start: var(--space-l-xl);
-    font-size: .875rem;
+    font-size: 0.875rem;
     display: grid;
     grid-auto-rows: max-content;
     align-items: start;
@@ -142,10 +142,10 @@ pre[class*="language-"] {
 .c-btn.c-btn--playground {
     position: absolute;
     font-size: var(--step--1);
-    bottom: .5rem;
-    right: .5rem;
-    offset-block-end: .5rem;
-    offset-inline-end: .5rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    offset-block-end: 0.5rem;
+    offset-inline-end: 0.5rem;
 
     @media all and (max-width: 768px) {
         display: none;
@@ -157,3 +157,27 @@ pre[class*="language-"] {
         opacity: 1;
     }
 }
+
+#scroll-up-btn {
+    width: 50px;
+    height: 50px;
+    display: none;
+    position: fixed;
+    right: 50px;
+    bottom: 35px;
+    font-size: 1.5rem;
+    border-radius: 50%;
+    color: var(--body-background-color);
+    text-decoration: none;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--link-color);
+
+    @media (max-width: 800px) {
+        right: 35px;
+    }
+
+    @media (max-width: 600px) {
+        right: 25px;
+    }
+}
diff --git a/docs/src/assets/scss/print.scss b/docs/src/assets/scss/print.scss
@@ -207,3 +207,7 @@ ul {
         margin: 1cm;
     }
 }
+
+#scroll-up-btn {
+    display: none;
+}