WordPress模板插件定制

您现在的位置是:首页 > WordPress教程WordPress教程

WordPress如何添加返回顶部按钮

查看 WP集市 的更多文章WP集市 2025-09-01 【WordPress教程】 1018人已围观

  1. 先说为啥要搞返回顶部按钮。你想想看,用户读完文章,手指都划酸了,还得自己往上滑?太不人道了。加个按钮,点一下直接飞回顶部,体验感拉满。WordPress本身没带这功能,但随便捣鼓几下就能搞定,不用慌。

  2. 最简单的法子是用插件。比如装个「Scroll to Top」或者「WP Back to Top」,搜到安装激活就行。但咱是程序员,能写代码就别堆插件,对吧?下面直接上代码方案,放主题文件里。

  3. 先加按钮的HTML和样式。打开你主题的footer.php,在前塞个div:

    <div id="back-to-top" style="display: none;">↑</div>

    然后扔点CSS到style.css里:

    #back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #333;
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    }
    #back-to-top:hover {
    background: #555;
    }
  4. 接着搞交互逻辑。在js文件里加滚动检测和点击事件。没独立js的话,直接往footer.php里写