fixed 返回顶部功能
This commit is contained in:
1 parent
4cdf53100e
commit
4983253311
6 files changed
+93
-8
No files matched your search
@@ -1,5 +1,7 @@
|
||||
{{ define "main" }}
|
||||
<div id="pjax-container" uk-scrollspy="target: > #szh,hr,h2,p; cls: uk-animation-slide-bottom-small; delay: 0">
|
||||
<!-- 用于 Pjax 获取当前文章 ID -->
|
||||
<div id="data-pid" style="display:none;">/{{ .Params.pid | default .Title }}.html</div>
|
||||
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > #szh; cls: uk-animation-slide-bottom-small; delay: 0">
|
||||
{{ .Content }}
|
||||
<div id="szh">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<article style="margin-bottom: 3.5em;">
|
||||
<h1 class="post-title" itemprop="name headline" uk-scrollspy="cls: uk-animation-slide-top-small; delay: 200">{{ .Title }}</h1>
|
||||
<div class="meta" uk-scrollspy="cls: uk-animation-fade; delay: 300">
|
||||
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: {{ .WordCount }} 分类:
|
||||
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: {{ .WordCount }} 阅读时间: {{ .ReadingTime }} 分钟 分类:
|
||||
{{ range .Params.categories }}
|
||||
<a href="{{ . }}">{{ . }}</a>
|
||||
{{ end }}
|
||||
|
||||
@@ -13,6 +13,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" id="back-to-top" title="返回顶部">
|
||||
<i class="ri-arrow-up-s-line"></i>
|
||||
</a>
|
||||
<script src="/js/iconfont.js"></script>
|
||||
<script src="/js/lightgallery.umd.min.js"></script>
|
||||
<script src="/js/uikit.min.js"></script>
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
</style>
|
||||
<script src="/js/jquery.min.js"></script>
|
||||
<script src="/js/barrage.min.js"></script>
|
||||
<script src="/js/jquery.scrollUp.min.js"></script>
|
||||
|
||||
<script src="/js/instantpage.min.js" type="module" defer></script>
|
||||
<script src="/js/pjax.js"></script>
|
||||
{{ if or (eq .Type "about") (eq .Type "post") }}
|
||||
|
||||
@@ -756,6 +756,8 @@ ul {
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
|
||||
z-index: 2147483647; /* Ensure it's on top */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#scrollUp::before {
|
||||
@@ -2795,6 +2797,53 @@ img[atk-emoticon] {
|
||||
/* GenericInserted */ [data-theme="dark"] .chroma .gi { color:#50fa7b;font-weight:bold }
|
||||
/* GenericOutput */ [data-theme="dark"] .chroma .go { color:#44475a }
|
||||
/* GenericPrompt */ [data-theme="dark"] .chroma .gp { }
|
||||
|
||||
/* Back to Top Button */
|
||||
#back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--bankuai-color);
|
||||
color: var(--text-content-color);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
z-index: 2147483647;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s, background-color 0.3s, transform 0.3s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#back-to-top.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#back-to-top:hover {
|
||||
background-color: var(--erji-color);
|
||||
color: #fff;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #back-to-top {
|
||||
background-color: var(--bankuai-dark-color);
|
||||
color: var(--text-content-dark-color);
|
||||
box-shadow: 0 2px 5px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] #back-to-top:hover {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
}
|
||||
/* GenericStrong */ [data-theme="dark"] .chroma .gs { }
|
||||
/* GenericSubheading */ [data-theme="dark"] .chroma .gu { font-weight:bold }
|
||||
/* GenericTraceback */ [data-theme="dark"] .chroma .gt { }
|
||||
|
||||
@@ -10,12 +10,43 @@ function isMobile() {
|
||||
// 文章图片灯箱
|
||||
window.ViewImage && ViewImage.init('.post-content img');
|
||||
|
||||
// 激活返回顶部插件
|
||||
$(function () {
|
||||
$.scrollUp({
|
||||
animation: 'fade',
|
||||
scrollImg: true
|
||||
});
|
||||
// Pure JavaScript Back to Top (High Performance)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var backToTopButton = document.getElementById('back-to-top');
|
||||
if (backToTopButton) {
|
||||
var isVisible = false;
|
||||
var ticking = false;
|
||||
|
||||
function update() {
|
||||
if (window.scrollY > 300) {
|
||||
if (!isVisible) {
|
||||
backToTopButton.classList.add('show');
|
||||
isVisible = true;
|
||||
}
|
||||
} else {
|
||||
if (isVisible) {
|
||||
backToTopButton.classList.remove('show');
|
||||
isVisible = false;
|
||||
}
|
||||
}
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(update);
|
||||
ticking = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
backToTopButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// loader定时器
|
||||
|
||||
Reference in new issue
Block a user