WordPress网站返回顶部按钮代码

网站右侧返回顶部按钮

实现代码

//网站右侧添加返回顶部按钮
function custom_back_to_top_button() {
    echo '<a href="#" class="back-to-top">Top</a>';
}
add_action('wp_footer', 'custom_back_to_top_button');
function custom_back_to_top_enqueue_scripts() {
    wp_enqueue_style('back-to-top-style', plugins_url('css/back-to-top.css', __FILE__));
    wp_enqueue_script('back-to-top-script', plugins_url('js/back-to-top.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_back_to_top_enqueue_scripts');

在当前使用主题的 functions.php 文件里或者之前分享的 制作简单WordPress插件 里添加以上代码。

/**返回顶部按钮css样式**/
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 50px;
    height: 50px;
    background-color: #444;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
   .back-to-top {
        width: 35px;
        height: 35px;
        line-height: 35px;
        bottom: 100px;
        right: 10px;
    }
}

在插件里新建一个 CSS文件夹，再新建一个 back-to-top.css的文件，把上边的代码添加进去。

/**返回顶部js按钮**/
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.back-to-top').fadeIn();
        } else {
            $('.back-to-top').fadeOut();
        }
    });

    $('.back-to-top').click(function() {
        $('html, body').animate({scrollTop : 0}, 800);
        return false;
    });
});

在插件里新建一个 js文件夹，再新建一个 back-to-top.js的文件，把上边的代码添加进去。

注：以上代码经过AI分析调整，仅供学习记录。添加之后网页端和手机端右下角都会出现一个 top按钮。