bbaovanc
/
bobatheme
mirror of https://github.com/BBaoVanC/bobatheme.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add back to top button

This commit is contained in:
BBaoVanC 2021-11-22 20:49:11 -06:00
parent 0e1559f2a2
commit 161c68d16c
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
4 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/css/bobastyle.css
View File

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

8
assets/js/back-to-top.js Normal file
View File

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

12
layouts/_default/baseof.html
View File

@ -4,6 +4,8 @@
{{ partial "head.html" . }}
<body>
<a id="top"></a>
<div class="top">
{{ partial "top.html" . }}
</div>
@ -13,9 +15,9 @@
{{ end }}
<div class="content">
{{ block "main" . }}
{{ .Content }}
{{ end }}
{{ block "main" . }}
{{ .Content }}
{{ end }}
</div>
{{ with .Site.Copyright }}
@ -26,6 +28,10 @@
</small>
</footer>
{{ end }}
<a id="back-to-top" href="#top">
{{ partial "icon.html" "chevron-up" }}
</a>
</body>
</html>

3
layouts/partials/head.html
View File

@ -12,6 +12,9 @@
{{ with resources.Get "css/syntax-light.css" | fingerprint "sha512" }}
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ with resources.Get "js/back-to-top.js" | fingerprint "sha512" }}
<script defer src="{{ .Permalink }}" type="text/javascript" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}
{{ with .Site.Params.faviconICO }}
<link rel="icon" type="image/x-icon" href="{{ . | absURL }}" />