mirror of
https://github.com/BBaoVanC/bobatheme.git
synced 2024-12-22 04:13:17 -06:00
Add back to top button
This commit is contained in:
parent
0e1559f2a2
commit
161c68d16c
@ -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
8
assets/js/back-to-top.js
Normal 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";
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
@ -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 }}" />
|
||||
|
Loading…
Reference in New Issue
Block a user