再次给博客添加两个返回顶部
再次仿着游钓四方 大佬的返回样式,自己整了一个,去掉了页脚的文字返回,别说,瞬间高大上了。返回顶部
你只需要把下面代码加到 当前主题 → footer.php 文件里,
再次仿着游钓四方 大佬的返回样式,自己整了一个,去掉了页脚的文字返回,别说,瞬间高大上了。你只需要把下面代码加到 当前主题 → footer.php 文件里,
标签之前即可。
<!-- 返回顶部按钮 开始 -->
<style>
/* 基础样式 */
#backToTop {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
width: 45px;
height: 45px;
background: #333;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 45px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.7;
}
#backToTop:hover {
background: #555;
opacity: 1;
}
</style>
<!-- 按钮 -->
<div id="backToTop">↑</div>
<!-- 滚动逻辑 -->
<script>
window.onscroll = function() {
let topBtn = document.getElementById('backToTop');
if (window.scrollY > 300) {
topBtn.style.display = 'block';
} else {
topBtn.style.display = 'none';
}
};
document.getElementById('backToTop').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
<!-- 返回顶部按钮 结束 -->
<!-- 返回首页按钮 -->
<style>
#backToHome {
position: fixed;
bottom: 85px; /* 放在返回顶部上面 */
right: 30px;
z-index: 99;
width: 45px;
height: 45px;
background: #333;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 45px;
font-size: 16px;
cursor: pointer;
opacity: 0.7;
transition: all 0.3s;
}
#backToHome:hover {
opacity: 1;
background: #555;
}
</style>
<a id="backToHome" href="<?php $this->options->siteUrl(); ?>">⌂</a>
</body> 标签前面bottom: 30px 距离底部距离
right: 30px 距离右侧距离
background: #333 按钮背景色
width: 45px 按钮大小
300 滚动多少像素后显示按钮
↑ 可以改成文字「顶部」或图标
发表评论