Go to top button (#975)

* go to top button

* refactoring

qdrant-landing/themes/qdrant-2024/assets/css/base.scss

@@ -63,3 +63,4 @@ body {
 @import 'partials/breadcrumbs';
 @import 'partials/footer';
 @import 'partials/not-found';
+@import 'partials/go-to-top-button';

qdrant-landing/themes/qdrant-2024/assets/css/partials/_docs-menu.scss

@@ -97,6 +97,10 @@
         display: block;
         position: relative;
         margin-bottom: $spacer * 0.5;
+        // hide native details marker
+        &::-webkit-details-marker {
+          display: none;
+        }
 
         a {
           display: flex;

qdrant-landing/themes/qdrant-2024/assets/css/partials/_go-to-top-button.scss

@@ -0,0 +1,19 @@
+.go-to-top-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    color: $neutral-30;
+    background: $neutral-94;
+    z-index: 10;
+    transition: background-color 0.3s;
+
+    [data-theme="light"] & {
+        color: $neutral-30;
+        background: $neutral-94;
+    }
+
+    [data-theme="dark"] & {
+        color: $neutral-94;
+        background: $neutral-30;
+    }
+}

qdrant-landing/themes/qdrant-2024/assets/js/helpers.js

@@ -24,3 +24,24 @@ export function scrollIntoViewWithOffset(id, offset) {
 export function isNodeList(list) {
   return Object.prototype.isPrototypeOf.call(NodeList.prototype, list);
 }
+
+export function initGoToTopButton(selector) {
+  const button = document.querySelector(selector || '.go-to-top');
+
+  if (!button) {
+    return;
+  }
+
+  window.addEventListener('scroll', () => {
+    const shouldShow = window.scrollY > window.innerHeight / 3;
+    button.classList.toggle('d-block', shouldShow);
+    button.classList.toggle('d-none', !shouldShow);
+  });
+
+  button.addEventListener('click', () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  });
+}

qdrant-landing/themes/qdrant-2024/assets/js/index.js

@@ -1,5 +1,6 @@
 import scrollHandler from './scroll-handler';
 import { XXL_BREAKPOINT } from './constants';
+import { initGoToTopButton } from './helpers';
 
 // on document ready
 document.addEventListener('DOMContentLoaded', function () {
@@ -75,4 +76,5 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   });
 
+  initGoToTopButton('#scrollToTopBtn');
 });

qdrant-landing/themes/qdrant-2024/layouts/_default/baseof.html

@@ -9,6 +9,9 @@
       {{ block "main" . }}{{ end }}
     </main>
     {{ partial "footer" . }}
+    {{ if or (in (slice "documentation" "benchmarks") .Section) (and (.IsPage) (in (slice "blog" "articles") .Section)) }}
+      {{ partial "go-to-top-button" . }}
+    {{ end }}
   </body>
   {{ partial "js.html" . }}
 </html>

qdrant-landing/themes/qdrant-2024/layouts/partials/go-to-top-button.html

@@ -0,0 +1 @@
+<button class="d-none button button_outlined go-to-top-button" id="scrollToTopBtn" title="Go to top">Up!</button>