From 161c68d16c47185073d6f2dc6b45cce1bcdcae18 Mon Sep 17 00:00:00 2001 From: BBaoVanC Date: Mon, 22 Nov 2021 20:49:11 -0600 Subject: [PATCH] Add back to top button --- assets/css/bobastyle.css | 21 +++++++++++++++++++++ assets/js/back-to-top.js | 8 ++++++++ layouts/_default/baseof.html | 12 +++++++++--- layouts/partials/head.html | 3 +++ 4 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 assets/js/back-to-top.js diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css index 9d6e4ba..5327d41 100644 --- a/assets/css/bobastyle.css +++ b/assets/css/bobastyle.css @@ -245,6 +245,17 @@ footer { text-align: center; } +#back-to-top { + position: fixed; + float: right; + bottom: 25px; + right: 25px; + background-color: var(--background-3); + border-radius: 100%; + padding: 12px; + display: none; +} + /* Navbar formatting */ @@ -319,6 +330,16 @@ footer { /* Basic elements */ +html { + scroll-behavior: smooth; +} + +@media screen and (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + body { background-color: var(--background); color: var(--text-normal); diff --git a/assets/js/back-to-top.js b/assets/js/back-to-top.js new file mode 100644 index 0000000..13a65a1 --- /dev/null +++ b/assets/js/back-to-top.js @@ -0,0 +1,8 @@ +const backToTop = document.getElementById("back-to-top"); +window.onscroll = function() { + if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { + backToTop.style.display = "block"; + } else { + backToTop.style.display = "none"; + } +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index fb1420f..83ec393 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -4,6 +4,8 @@ {{ partial "head.html" . }} + +
{{ partial "top.html" . }}
@@ -13,9 +15,9 @@ {{ end }}
- {{ block "main" . }} - {{ .Content }} - {{ end }} + {{ block "main" . }} + {{ .Content }} + {{ end }}
{{ with .Site.Copyright }} @@ -26,6 +28,10 @@ {{ end }} + + + {{ partial "icon.html" "chevron-up" }} + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d166d08..cc463f1 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -12,6 +12,9 @@ {{ with resources.Get "css/syntax-light.css" | fingerprint "sha512" }} {{ end }} + {{ with resources.Get "js/back-to-top.js" | fingerprint "sha512" }} + + {{ end }} {{ with .Site.Params.faviconICO }}