mirrors/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2023-12-21 10:22:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

add scroll to top button

Browse Source
This commit is contained in:
Aditya Telange 2020-07-27 12:04:36 +05:30
parent 700c8e07da
commit 1329075c61
3 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/footer.css
View File

@ -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;
}

2
layouts/_default/baseof.html
View File

@ -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>

17
layouts/partials/footer.html
View File

@ -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>