B2主题美化-让你的回到顶部按钮隐藏起来

前言

我们B2主题的回到顶部的按钮一直都显示，不太喜欢，所以用AI写了个代码，可以增加趣味性

以下是修改后的代码，实现了回到顶部按钮默认隐藏起来，在页面滑动的时候才显示的功能。主要修改点在于对按钮初始显示状态以及显示逻辑的调整。

我这个是修改了代码的侧边栏，原主题是要修改代码的，

第一步

修改位置在B2/Modules/Templates/Footer.php, 480-483行处，当前B2版本：5.8.0，版本不同可能位置不同，

原主题可以添加定义一个元素ID，比如#return-top ,

给div添加一个元素ID（div id="return-top"）（圆括号改为尖括号<，这里使用圆括号防止代码在此页面运行）,

然后把以下代码放入function.php，有子主题放子主题，没子主题放父主题或者新建子主题。

[content_hide]

// 添加回到顶部按钮的样式
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' );

[/content_hide]

在上述代码中：

样式部分（add_scroll_top_button_style函数）

• 将#return-top元素的display属性设置为none，这意味着按钮一开始就是隐藏的，不会像原来那样先去判断页面高度和窗口高度的关系来决定初始显示与否，而是完全依靠滚动时的逻辑来控制显示隐藏。

JavaScript 代码部分（add_scroll_top_button_script函数）

• 移除了最开始判断页面是否有滚动条的代码逻辑，因为现在按钮默认就是隐藏的，只关注页面滚动的情况。当滚动条与页面顶部距离超过100px时，通过fadeIn方法让按钮淡入显示；当滚动距离小于等于100px时，

  通过fadeOut方法让按钮淡出隐藏。

• 点击按钮回到顶部的动画逻辑保持不变，依然是让页面平滑滚动到顶部（滚动时间设置为800毫秒）。