本文是《免费(共164篇)》专题的第 164 篇。阅读本文前,您可以先阅读前面的一些文章:
前言
我们B2主题的回到顶部的按钮一直都显示,不太喜欢,所以用AI写了个代码,可以增加趣味性
以下是修改后的代码,实现了回到顶部按钮默认隐藏起来,在页面滑动的时候才显示的功能。主要修改点在于对按钮初始显示状态以及显示逻辑的调整。
我这个是修改了代码的侧边栏,原主题是要修改代码的,
第一步
修改位置在B2/Modules/Templates/Footer.php, 480-483行处,当前B2版本:5.8.0,版本不同可能位置不同,
原主题可以添加定义一个元素ID,比如#return-top ,
给div添加一个元素ID(div id="return-top")(圆括号改为尖括号<,这里使用圆括号防止代码在此页面运行),
然后把以下代码放入function.php,有子主题放子主题,没子主题放父主题或者新建子主题。
// 添加回到顶部按钮的样式
function add_scroll_top_button_style() {
?>
<style>
#return-top{
bottom: 20px;
right: 20px;
display: none; // 始终初始化为隐藏,无论页面是否有滚动条
z-index: 99;
}
#return-top a{
display: block;
width: 50px;
height: 50px;
background: #000;
color: #fff;
text-align: center;
line-height: 50px;
text-decoration: none;
}
</style>
<?php
}
add_action( 'wp_head', 'add_scroll_top_button_style' );
// 右侧小工具回到顶部按钮滑动显示JavaScript代码
function add_scroll_top_button_script() {
?>
<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {
// 当滚动条与页面顶部距离超过100px时显示按钮,初始就是隐藏状态,只有滚动时才判断是否显示
if ($(window).scrollTop() > 100) {
$('#return-top').fadeIn();
} else {
$('#return-top').fadeOut();
}
});
$('#return-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
<?php
}
add_action( 'wp_footer', 'add_scroll_top_button_script' );
在上述代码中:
样式部分(add_scroll_top_button_style
函数)
JavaScript 代码部分(add_scroll_top_button_script
函数)
不错,给你点个赞,继续加油哈!
必须加油打气!
博主大好人,给你点赞!
好小子,我看好你!
UP主你很酷!
下载看看,先赞一个!
感谢大佬无偿分享!