💄 Add back-to-top link

Based on https://codepen.io/chriscoyier/pen/NWmzZXo Fixes #377
govdirectory · May 14, 2024 · 311fb94 · 311fb94
1 parent e87e655
commit 311fb94
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/static/main.css b/static/main.css
@@ -135,6 +135,18 @@ input {
     object-fit: contain;
 }
 
+.to-top-link {
+  margin-block-start: calc(100vh + 200px);
+  position: sticky;
+  bottom: 1rem;
+  left: 1rem;
+
+  background: #00264d;
+  color: #FFF;
+  padding: 7px 21px;
+  border-radius: 3px;
+  text-decoration: none;
+}
 
 /* SECTIONS FOR CONTENT */
 

diff --git a/templates/country-page.html b/templates/country-page.html
@@ -75,6 +75,7 @@ <h2 class="m0 expand-mobile">Agencies</h2>
 
     {{- $country_orgs := query (join "" "generators/" .safeName.String ".rq") -}}
     {{- include "org-table.html" $country_orgs -}}
+    <a href="#top" class="to-top-link">Back to top</a>
 </main>
 {{ end }}