Merge pull request #52 from giulong/docs/search

Docs/search
giulong · Dec 2, 2023 · 20e81a3 · 20e81a3
2 parents 431b577 + 506c679
commit 20e81a3
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 0 deletions.
diff --git a/docs/_includes/topButton.html b/docs/_includes/topButton.html
@@ -0,0 +1 @@
+<button onclick="topFunction()" id="topButton" title="Go to top">Top</button>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -37,6 +37,7 @@ <h1>{{ site.title | default: site.github.repository_name }}</h1>
 
         {% include search.html %}
         {{ content }}
+        {% include topButton.html %}
 
     </section>
 </div>
@@ -51,5 +52,6 @@ <h1>{{ site.title | default: site.github.repository_name }}</h1>
 <script src="assets/scripts/search.js"></script>
 <script src="assets/scripts/copyCode.js"></script>
 <script src="assets/scripts/openImage.js"></script>
+<script src="assets/scripts/topButton.js"></script>
 </body>
 </html>
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
@@ -157,3 +157,24 @@ img.copy-icon {
     width: 16px;
     vertical-align: bottom;
 }
+
+#topButton {
+    display: none;
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    z-index: 99;
+    border: 1px solid #444;
+    outline: none;
+    background-color: #3A3C42;
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+#topButton:hover {
+    background-color: #555;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
+}
diff --git a/docs/assets/scripts/search.js b/docs/assets/scripts/search.js
@@ -5,6 +5,7 @@ const resultsContainer = document.getElementById('results-container');
 const noResult = document.createElement('li');
 const searchContainerTop = searchContainer.getBoundingClientRect().top - 5;
 const section = document.querySelectorAll('section')[0];
+const topButton = document.getElementById("topButton");
 
 noResult.innerText = 'No results'
 noResult.setAttribute('id', 'no-results');
@@ -36,9 +37,11 @@ function stickyHeader() {
     if (window.pageYOffset > searchContainerTop) {
         searchContainer.classList.add('sticky');
         section.classList.add('sticky-section');
+        topButton.style.display = 'block';
     } else {
         searchContainer.classList.remove('sticky');
         section.classList.remove('sticky-section');
+        topButton.style.display = 'none';
     }
 }
 

diff --git a/docs/assets/scripts/topButton.js b/docs/assets/scripts/topButton.js
@@ -0,0 +1,4 @@
+function topFunction() {
+    document.body.scrollTop = 0; // For Safari
+    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<button onclick="topFunction()" id="topButton" title="Go to top">Top</button>