✨ Add scroll to top link

CHANGELOG.md

@@ -16,7 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Tables of Contents on article pages
 - Taxonomies on article and list pages
 - Author `headline` parameter
-- Skip to content links
+- Skip to content and Scroll to top links
 
 ### Changed
 

assets/css/compiled/main.css

@@ -1413,6 +1413,14 @@ body a, body button {
           text-decoration-line: underline;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
 .invisible {
   visibility: hidden;
 }
@@ -1429,6 +1437,11 @@ body a, body button {
   position: relative;
 }
 
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
 .inset-0 {
   top: 0px;
   right: 0px;
@@ -1436,6 +1449,26 @@ body a, body button {
   left: 0px;
 }
 
+.top-\[100vh\] {
+  top: 100vh;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.bottom-16 {
+  bottom: 4rem;
+}
+
+.-bottom-4 {
+  bottom: -1rem;
+}
+
+.top-\[calc\(100vh-5rem\)\] {
+  top: calc(100vh - 5rem);
+}
+
 .top-20 {
   top: 5rem;
 }
@@ -1602,6 +1635,10 @@ body a, body button {
   height: 100vh;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -1610,10 +1647,6 @@ body a, body button {
   height: 2rem;
 }
 
-.h-12 {
-  height: 3rem;
-}
-
 .h-full {
   height: 100%;
 }
@@ -1630,6 +1663,10 @@ body a, body button {
   min-height: 0px;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-36 {
   width: 9rem;
 }
@@ -1765,14 +1802,14 @@ body a, body button {
   scroll-behavior: smooth;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1837,6 +1874,10 @@ body a, body button {
   background-color: rgba(var(--color-primary-200), var(--tw-bg-opacity));
 }
 
+.bg-neutral\/50 {
+  background-color: rgba(var(--color-neutral), 0.5);
+}
+
 .bg-neutral-500\/50 {
   background-color: rgba(var(--color-neutral-500), 0.5);
 }
@@ -1928,16 +1969,16 @@ body a, body button {
   padding-bottom: 2.5rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1995,6 +2036,11 @@ body a, body button {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2005,11 +2051,6 @@ body a, body button {
   line-height: 1.5rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -2074,16 +2115,16 @@ body a, body button {
   color: rgba(var(--color-primary-600), var(--tw-text-opacity));
 }
 
-.text-neutral-700 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
-}
-
 .text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
 }
 
+.text-neutral-700 {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
+}
+
 .text-primary-500 {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity));
@@ -2134,6 +2175,12 @@ body a, body button {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2185,16 +2232,16 @@ body a, body button {
   background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important;
 }
 
-.hover\:text-primary-700:hover {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
-}
-
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity));
 }
 
+.hover\:text-primary-700:hover {
+  --tw-text-opacity: 1;
+  color: rgba(var(--color-primary-700), var(--tw-text-opacity));
+}
+
 .hover\:text-primary-400:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-400), var(--tw-text-opacity));

config/_default/params.toml

@@ -13,6 +13,7 @@ enableSearch = false
 # description = "My awesome website"
 # mainSections = ["section1", "section2"]
 # robots = ""
+showScrollToTop = true
 
 [homepage]
   layout = "page" # valid options: page, profile, custom

exampleSite/config/_default/params.toml

@@ -13,6 +13,7 @@ enableSearch = true
 # description = "My awesome website"
 mainSections = ["samples"]
 # robots = ""
+showScrollToTop = true
 
 [homepage]
   layout = "custom" # valid options: page, profile, custom

i18n/de.yaml

@@ -24,13 +24,14 @@ footer:
   light_appearance: "Zum hellen Erscheinungsbild wechseln"
   powered_by: "Erstellt mit {{ .Hugo }} & {{ .Congo }}"
 
-# header:
-#   skip_to_main: "Skip to main content"
-
 list:
   externalurl_title: "Link zu einer externen Seite"
   no_articles: "Es gibt hier noch keine Beiträge."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
 # search:
 #   open_button_title: "Search (/)"
 #   close_button_title: "Close (Esc)"

i18n/en.yaml

@@ -24,13 +24,14 @@ footer:
   light_appearance: "Switch to light appearance"
   powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}"
 
-header:
-  skip_to_main: "Skip to main content"
-
 list:
   externalurl_title: "Link to external site"
   no_articles: "There's no articles to list here yet."
 
+nav:
+  scroll_to_top_title: "Scroll to top"
+  skip_to_main: "Skip to main content"
+
 search:
   open_button_title: "Search (/)"
   close_button_title: "Close (Esc)"

i18n/es.yaml

@@ -24,13 +24,14 @@ footer:
   light_appearance: "Cambiar a modo claro"
   powered_by: "Desarrollada con {{ .Hugo }} & {{ .Congo }}"
 
-# header:
-#   skip_to_main: "Skip to main content"
-
 list:
   externalurl_title: "Link a página externa"
   no_articles: "Aún no hay artículos para listar aquí."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
 # search:
 #   open_button_title: "Search (/)"
 #   close_button_title: "Close (Esc)"

i18n/fr.yaml

@@ -24,13 +24,14 @@ footer:
   # light_appearance: "Switch to light appearance"
   powered_by: "Propulsé par {{ .Hugo }} & {{ .Congo }}"
 
-# header:
-#   skip_to_main: "Skip to main content"
-
 list:
   externalurl_title: "Lien d'article externe."
   no_articles: "Il n'y a pas encore d'articles ici."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
 # search:
 #   open_button_title: "Search (/)"
 #   close_button_title: "Close (Esc)"

i18n/pt-BR.yaml

@@ -24,13 +24,14 @@ footer:
   light_appearance: "Mudar para modo claro"
   powered_by: "Movido por {{ .Hugo }} & {{ .Congo }}"
 
-# header:
-#   skip_to_main: "Skip to main content"
-
 list:
   externalurl_title: "Link para site externo"
   no_articles: "Não tem artigos para lista aqui ainda."
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
 # search:
 #   open_button_title: "Search (/)"
 #   close_button_title: "Close (Esc)"

i18n/zh.yaml

@@ -23,13 +23,14 @@ footer:
   light_appearance: "切换为浅色模式"
   powered_by: "由 {{ .Hugo }} & {{ .Congo }} 强力驱动"
 
-# header:
-#   skip_to_main: "Skip to main content"
-
 list:
   externalurl_title: "链接到外部网站"
   no_articles: "这里还没有任何文章可以列出。"
 
+# nav:
+#   scroll_to_top_title: "Scroll to top"
+#   skip_to_main: "Skip to main content"
+
 # search:
 #   open_button_title: "Search (/)"
 #   close_button_title: "Close (Esc)"

layouts/_default/baseof.html

@@ -14,17 +14,36 @@
   <body
     class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
   >
-    <div class="absolute flex self-center">
+    <div id="the-top" class="absolute flex self-center">
       <a
         class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0"
         href="#main-content"
         ><span class="font-bold ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400"
           >&darr;</span
-        >{{ i18n "header.skip_to_main" }}</a
+        >{{ i18n "nav.skip_to_main" }}</a
       >
     </div>
     {{- partial "header.html" . -}}
-    <main id="main-content" class="grow">{{- block "main" . }}{{- end }}</main>
+    <main id="main-content" class="relative grow">
+      {{- block "main" . }}{{- end }}
+      {{ if .Site.Params.showScrollToTop | default true }}
+        <div
+          class="absolute top-[100vh] right-0 w-12 pointer-events-none {{ if .Params.showPagination | default (.Site.Params.article.showPagination | default true) }}
+            bottom-16
+          {{ else }}
+            -bottom-4
+          {{ end }}"
+        >
+          <a
+            href="#the-top"
+            class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5rem)] text-neutral-500 bg-neutral/50 backdrop-blur rounded-full text-xl flex items-center justify-center hover:text-primary-500"
+            aria-label="{{ i18n "nav.scroll_to_top_title" }}"
+            title="{{ i18n "nav.scroll_to_top_title" }}"
+            >&uarr;</a
+          >
+        </div>
+      {{ end }}
+    </main>
     {{ if .Site.Params.enableSearch | default false }}
       {{- partial "search.html" . -}}
     {{ end }}

layouts/partials/footer.html

@@ -32,7 +32,8 @@
       {{ if .Site.Params.attribution | default true }}
         <p class="text-xs text-neutral-500 dark:text-neutral-400">
           {{ $hugo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
-            href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>` }}
+            href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo</a>`
+          }}
           {{ $congo := printf `<a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href="https://git.io/hugo-congo" target="_blank" rel="noopener noreferrer">Congo</a>` }}
           {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}
         </p>
@@ -43,14 +44,14 @@
       <div class="text-sm cursor-pointer text-neutral-400 dark:text-neutral-500">
         <button
           id="dark-toggle"
-          class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
+          class="inline px-3 py-2 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400"
           title="{{ i18n "footer.dark_appearance" }}"
         >
           {{ partial "icon.html" "moon" }}
         </button>
         <button
           id="light-toggle"
-          class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
+          class="hidden px-3 py-2 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500"
           title="{{ i18n "footer.light_appearance" }}"
         >
           {{ partial "icon.html" "sun" }}