add:新增一个中文官网返回顶部的功能

This commit is contained in:
迷和油
2025-06-13 11:44:10 +08:00
parent 27c87f2e57
commit 614df2e8f9
3 changed files with 52 additions and 1 deletions

View File

@@ -88,4 +88,35 @@
</div>
</div>
</div>
</footer>
</footer>
<div class="backtop">
<img src="__IMAGES__/ic-backtop.png" class="ictop"/>
<span>返回顶部</span>
</div>
<script>
$(document).ready(function () {
// 获取窗口高度
var windowHeight = $(window).height();
// 监听滚动事件
$(window).scroll(function() {
console.log($(this).scrollTop(),windowHeight)
// 检查滚动距离是否超过一屏幕高度
if ($(this).scrollTop() > windowHeight) {
// 如果超过,显示返回顶部按钮
$('.backtop').fadeIn(300);
} else {
// 如果未超过,隐藏返回顶部按钮
$('.backtop').fadeOut(300);
}
});
// 点击返回顶部按钮时的事件处理
$('.backtop').click(function() {
// 平滑滚动到页面顶部
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>

View File

@@ -156,6 +156,26 @@ div{
#header{
height: 60px;
}
.backtop {
position: fixed;
right: 1.25rem;
padding: 10px 5px;
bottom: 10%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #666;
font-size: 0.75rem;
background: #fff;
cursor: pointer;
border: 1px solid rgb(241, 241, 241);
}
.backtop .ictop {
height: 1.125rem;
width: 0.9375rem;
margin-bottom: 0.25rem;
}
/*屏幕兼容性*/
@media screen and (min-width:150px) and (max-width:749px){
body{

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB