From 301efb837fd9c2b11e510ce99782897bd4c60b7a Mon Sep 17 00:00:00 2001 From: 1bl4z3r <34515568+1bl4z3r@users.noreply.github.com> Date: Sun, 6 Aug 2023 18:46:12 +0530 Subject: [PATCH] Add Scroll To Top button --- assets/js/main.js | 12 +++++++++++ assets/scss/_scroll.scss | 16 +++++++++++++++ assets/scss/style.scss | 1 + hugo.toml | 1 + layouts/_default/baseof.html | 2 +- layouts/partials/scroll-to-top.html | 6 ++++++ layouts/partials/svg.html | 2 ++ layouts/posts/single.html | 32 +++++++++++++++++++---------- layouts/shortcodes/figure.html | 30 +++++++++++++++++++++++++++ 9 files changed, 90 insertions(+), 12 deletions(-) create mode 100644 assets/scss/_scroll.scss create mode 100644 layouts/partials/scroll-to-top.html create mode 100644 layouts/shortcodes/figure.html diff --git a/assets/js/main.js b/assets/js/main.js index d18cbaa..b87e609 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -100,3 +100,15 @@ if (header !== null) { } }, 250)); } +// Scroll to Top button Toggle +// +const scroll = document.querySelector(".scroll-up"), rootElement = document.documentElement; + +function handleScroll() { + if (rootElement.scrollTop / (rootElement.scrollHeight - rootElement.clientHeight) > 0.4) { + scroll.classList.remove("hide");scroll.classList.add("show"); + } else { + scroll.classList.add("hide");scroll.classList.remove("show"); + } +} +document.addEventListener("scroll", handleScroll); \ No newline at end of file diff --git a/assets/scss/_scroll.scss b/assets/scss/_scroll.scss new file mode 100644 index 0000000..a3048f5 --- /dev/null +++ b/assets/scss/_scroll.scss @@ -0,0 +1,16 @@ +.scroll-up{ + position: fixed; + bottom: 10%; + right: 0; + z-index: 1; + opacity: 0; + transition: all 0.5s ease; +} +.hide{ + opacity: 0; + transform: translateY(20px); +} +.show{ + opacity: 1; + transform: translateY(0); + } \ No newline at end of file diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 2b790d3..d655ad8 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -2,6 +2,7 @@ @import "normalize.scss"; @import "syntax.scss"; @import "animate.scss"; +@import "scroll.scss"; /* Webkit Scrollbar Customize */ ::-webkit-scrollbar { diff --git a/hugo.toml b/hugo.toml index 69e0dc0..7a56b25 100644 --- a/hugo.toml +++ b/hugo.toml @@ -95,6 +95,7 @@ enableEmoji = true # Add custom css # customCSS = ["css/foo.css", "css/bar.css"] + scrollToTop = true # To enable Scroll to Top button Sitewide # Social Icons # Check https://github.com/Track3/hermit#social-icons for more info. [[params.social]] diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 7f09c90..e6b1658 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -30,7 +30,7 @@ {{ block "header" . -}}{{ end -}} {{ block "main" . -}}{{ end -}} {{ block "footer" . -}}{{ end }} - + {{ partial "scroll-to-top.html" . }} {{ $main := resources.Get "js/main.js" -}} {{ if .Site.Params.code_copy_button | default true -}} {{ $codeCopy := resources.Get "js/code-copy.js" -}} diff --git a/layouts/partials/scroll-to-top.html b/layouts/partials/scroll-to-top.html new file mode 100644 index 0000000..90cc15f --- /dev/null +++ b/layouts/partials/scroll-to-top.html @@ -0,0 +1,6 @@ +{{ if and (.Site.Params.scrollToTop) (.Params.scrolltotop) }} + + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/svg.html b/layouts/partials/svg.html index 4efb03f..5bb5042 100644 --- a/layouts/partials/svg.html +++ b/layouts/partials/svg.html @@ -46,6 +46,8 @@ {{- else if (eq .name "rss") -}} +{{- else if (eq .name "scrollup") -}} + {{- else -}} {{- end -}} diff --git a/layouts/posts/single.html b/layouts/posts/single.html index d221abb..00b6090 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -22,14 +22,10 @@
{{ .Date.Format .Site.Params.dateform }}

{{ .Title }}

-
- {{ .Content | replaceRE "()" `${1}${3}` | safeHTML }} -
- {{- if .Site.Params.relatedPosts }} - {{- partial "related-posts.html" . -}} - {{- end }} -
- + +
+
+ {{ .Content | replaceRE "()" `${1}${3}` | safeHTML }} +
+ {{- if .Site.Params.relatedPosts }} + {{- partial "related-posts.html" . -}} + {{- end }} +
{{- if .Params.toc }}