diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
index 13779e5dd86..49bdf8522c8 100644
--- a/docs/src/_includes/layouts/base.html
+++ b/docs/src/_includes/layouts/base.html
@@ -1,5 +1,5 @@
-
+
@@ -154,6 +154,7 @@
+
{% include 'partials/analytics.html' %}
{%- if hook == "component-library" -%}
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index 70888cd6b81..4050a901063 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -102,6 +102,9 @@ {{ title }}
{% include "partials/docs-footer.html" %}
+
+
+
diff --git a/docs/src/assets/js/scroll-up-btn.js b/docs/src/assets/js/scroll-up-btn.js
new file mode 100644
index 00000000000..cb77af1bcbe
--- /dev/null
+++ 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";
+ }
+ });
+ }
+})();
\ No newline at end of file
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 4aa106546c1..ee40123891d 100644
--- 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
index 68d4146240e..39dcc9470cd 100644
--- 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;
+}