From 1329075c61378a99a5e37e28c3310c7cc20caee8 Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Mon, 27 Jul 2020 12:04:36 +0530
Subject: [PATCH] add scroll to top button
---
assets/css/footer.css | 20 ++++++++++++++++++++
layouts/_default/baseof.html | 2 +-
layouts/partials/footer.html | 17 +++++++++++++++++
3 files changed, 38 insertions(+), 1 deletion(-)
diff --git a/assets/css/footer.css b/assets/css/footer.css
index d440da0..a3700c7 100644
--- a/assets/css/footer.css
+++ b/assets/css/footer.css
@@ -23,4 +23,24 @@
.footer a:hover {
color: var(--primary);
border-bottom: 1px solid var(--primary);
+}
+
+.top-link {
+ font-size: 12px;
+ visibility: hidden;
+ opacity: 0;
+ position: fixed;
+ bottom: 60px;
+ right: 30px;
+ z-index: 99;
+ background: var(--tertiary);
+ width: 42px;
+ height: 42px;
+ padding: 12px;
+ color: var(--primary);
+ border-radius: 64px;
+ fill: currentColor;
+ fill-opacity: 80%;
+ transition: visibility 0.5s,
+ opacity 0.8s linear;
}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 710cb92..1d4ccc6 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -8,7 +8,7 @@
<body
class="{{ if (and (eq .Kind `page` ) (ne .Layout `archives`)) }}single{{ else }}list{{ if .IsHome }} home {{ end }}{{ end }}{{ if eq $.Site.Params.defaultTheme `dark` }} dark {{ end }}">
{{- partial "header.html" . }}
- <main class=" main">
+ <main class="main" id="top">
{{- block "main" . }}
{{end }}
</main>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index efab5bb..85e7273 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,6 +6,13 @@
<span>Themeď¸ <a href="https://github.com/adityatelange/hugo-PaperMod" rel="noopener"
target="_blank">PaperMod</a></span>
</footer>
+<a href="#top">
+ <button class="top-link" id="top-link" type="button">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6">
+ <path d="M12 6H0l6-6z" /></svg>
+ </button>
+</a>
+
{{ $highlight := resources.Get "js/highlight.min.js" | minify | fingerprint}}
<script src="{{ $highlight.Permalink }}" integrity="{{ $highlight.Data.Integrity }}"></script>
<script>
@@ -19,4 +26,14 @@
});
});
});
+ var mybutton = document.getElementById("top-link");
+ window.onscroll = function () {
+ if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
+ mybutton.style.visibility = "visible";
+ mybutton.style.opacity = "1";
+ } else {
+ mybutton.style.visibility = "hidden";
+ mybutton.style.opacity = "0";
+ }
+ };
</script>
\ No newline at end of file