当前位置： 首页 > news >正文

给WordPress网站添加返回顶部按钮

news 2026/5/13 20:47:54

给WordPress网站底部添加一个按钮，点它就可以现实快速返回到顶部。有两种方法可以现实，一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。

给WordPress网站底部添加一个按钮，点它就可以现实快速返回到顶部。有两种方法可以现实，一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。
不废话，直接上代码。
1、将下面这段代码添加加到footer.php</footer>标签后

<a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>


2、将下面这段JS代码添加到js/customer.js中

$(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
          $('.back-to-top').addClass('fixed-back-to-top');
      } else {
          $('.back-to-top').removeClass('fixed-back-to-top');
      }
  });


3、将下面这段CSS代码添加到css/theme.css中

.back-to-top {
    color:#fff;
}
.fixed-back-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 1150;
  background: #ff6600; 
  color: #fff; 
  width: 50px; 
  height: 50px; 
  text-align: center; 
  border-radius:50%;
}
.fixed-back-to-top i {
  font-size:2rem; 
  line-height: 3rem; 
}
.fixed-back-to-top:hover {
    background: #333333; color: #fff; text-decoration: none;
}
.fixed-back-to-top:focus {
    color: #fff;
}
.active.fixed-back-to-top {
    transform: translateY(0px); -webkit-transform: translateY(0);
}
html.mobile .fixed-back-to-top {
    display: none !important;
}
html.tablet .fixed-back-to-top {
    display: none !important;
}
@media all and (min-width:480px)
{
.fixed-back-to-top {
    right: 40px; bottom: 40px;
}


到此大功告成，刷新网站，就可以看到，在网站的右下角会出现要添加的按钮图标了。

原文链接 https://www.mymoban.com/wp/3.html

相关文章：

给WordPress网站添加返回顶部按钮

给WordPress网站底部添加一个按钮&#xff0c;点它就可以现实快速返回到顶部。有两种方法可以现实&#xff0c;一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。 给WordPress网站底部添加一个按钮&#xff0c;点它就可以现实快速返回到顶部。有两种方…...

编程日记 2024/1/1 0:12:52

App Inventor 2 接入短信服务，实现短信验证码功能

发送短信验证码功能一般都是基于短信平台提供的sdk进行调用&#xff0c;这里是基于阿里云短信平台进行的开发&#xff0c;阿里云短信平台接入步骤请点此参考。 App Inventor 2拓展提供的函数如下&#xff1a; 主要提供2个函数&#xff0c;生成随机位数的数字随机码 和 发送短信…...

编程日记 2024/1/1 0:10:50

Linux环境grep搜索方法记录

1 grep grep 命令&#xff0c;用来搜索字符串所在位置&#xff0c;可以具体到不同文件&#xff0c;不同行&#xff1b; 在Linux 下&#xff0c;查看命令释义如下 zhaocubuntu2004:~$ grep --help Usage: grep [OPTION]... PATTERNS [FILE]... Search for PATTERNS in each FI…...

编程日记 2024/1/1 0:06:46

C语言-破解密码

题目描述 密码是我们生活中非常重要的东东&#xff0c;我们的那么一点不能说的秘密就全靠它了。哇哈哈. 接下来渊子要在密码之上再加一套密码&#xff0c;虽然简单但也安全。 假设老王原来一个BBS上的密码为zvbo941987,为了方便记忆&#xff0c;他通过一种算法把这个密码变换…...

编程日记 2024/1/1 0:03:44

ffmpeg 解码文件时的时间戳问题

实时流和普通文件 1 实时流 实时流编码时&#xff0c;我们一般不进行b帧编码&#xff0c;但是文件存储时为了减小大小&#xff0c;会增加b帧&#xff0c;实时流只带了I&#xff0c;P帧&#xff0c;那就会好很多 2 普通文件 很多文件带了b帧&#xff0c;所以要使用解码时间去同…...

编程日记 2024/1/1 0:01:41

Java企业电子招投标系统源代码，支持二次开发，采用Spring cloud框架

在数字化采购领域&#xff0c;企业需要一个高效、透明和规范的管理系统。通过采用Spring Cloud、Spring Boot2、Mybatis等先进技术&#xff0c;我们打造了全过程数字化采购管理平台。该平台具备内外协同的能力&#xff0c;通过待办消息、招标公告、中标公告和信息发布等功能模块…...

编程日记 2024/1/1 0:00:40

[python]基于faster whisper实时语音识别语音转文本

语音识别转文本相信很多人都用过&#xff0c;不管是手机自带&#xff0c;还是腾讯视频都附带有此功能&#xff0c;今天简单说下&#xff1a; faster whisper地址&#xff1a; https://github.com/SYSTRAN/faster-whisperhttps://link.zhihu.com/?targethttps%3A//github.com…...

编程日记 2023/12/31 23:59:39

2023纠结中前行？ 2024继续还是放下？

喝下2023年的第一口雪碧&#xff0c;没有想像中的那么期待&#xff0c;甜水&#xff0c;放弃吧&#xff1b;还是吃些水果吧&#xff0c;不行吃块肉、喝两口酒~ 关于生活 挣扎了10几年的一颗牙“终于“掉了&#xff0c;几个月时间都在为新牙努力着&#xff1b;”进了医院就不在…...

编程日记 2023/12/31 23:56:36

原型链补充

1.什么是原型对象 函数的独有属性,他用prototype来表示,可以在函数的prototype上挂载一些公用的属性和方法,供实例化对象来访问。 2.__proto__属性 这个属性每一个对象都有,实例化对象就是通过这个属性,来访问原型对象上的属性和方法的。 3.三者之间的关系 1.在构造函数的原型…...

编程日记 2023/12/31 23:55:35

《Linux Nano命令详解：小而强大的文本编辑器》

《Linux Nano命令详解&#xff1a;小而强大的文本编辑器》 引言&#xff1a; 在Linux系统中&#xff0c;文本编辑是开发和系统管理中不可或缺的一部分。虽然有许多强大的文本编辑器可供选择&#xff0c;但Nano以其简单易用、小巧灵活而备受喜爱。本文将深入探讨Nano命令&…...

编程日记 2023/12/31 23:53:33

系列四、Eureka自我保护

一、Eureka自我保护 1.1、故障现象 保护模式主要用于一组客户端和Eureka Server之间存在网络分区场景下的保护。一旦进入保护模式&#xff0c;Eureka Server将会尝试保护其服务注册表中的信息&#xff0c;不再删除服务注册表中的数据&#xff0c;也就是不会注销任何微服务。如…...

编程日记 2023/12/31 23:52:32

C++回调函数-实操（二）

回调通常通过函数指针、函数对象&#xff08;仿函数&#xff09;、Lambda 表达式或者 std::function 来实现。 1、函数指针实现回调 这一方法实现回调比较好记&#xff0c;就记住把函数当作参数传给方法&#xff0c;在方法中调用方法。 #include <iostream>// 回调函数…...

编程日记 2023/12/31 23:51:31

MySQL中常用的用户授权操作

mysql 用户授权 1 &#xff09;概述 让每个应用程序&#xff0c;单独开一个mysql的用户权限所有mysql用户存储在 mysql库的user表中 2 ) 多种用户授权方式示例 show databases; use mysql;select user, authentication_string, host from mysql.user;-- 创建和删除用户 -- c…...

编程日记 2023/12/31 23:46:27

LabVIEW开发智能火灾自动报警系统

LabVIEW开发智能火灾自动报警系统 系统基于LabVIEW虚拟仪器开发&#xff0c;由火灾报警控制器、感温感烟探测器、手动报警器、声光报警器、ZigBee无线通讯节点以及上位机电脑等组成&#xff0c;展示了LabVIEW在智能化火灾预警与控制方面的应用。该系统通过结合二总线协议和Zig…...

编程日记 2023/12/31 23:35:16

Vagrant使用教程

vmware下载地址&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html VirtualBox下载地址&#xff1a;https://www.virtualbox.org/wiki/Downloads Vagrant下载地址&#xff1a;https://developer.hashicorp.com/vagrant/install#…...

编程日记 2023/12/31 23:34:15

【Java】ThreadLocal原理与使用场景

ThreadLocal原理&#xff1a; 字段&#xff1a; //ThreadLocal对象的哈希码 private final int threadLocalHashCode nextHashCode();//生成ThreadLocal对象的哈希码时&#xff0c;需要用到该对象&#xff0c;从0开始 private static AtomicInteger nextHashCode new Atomic…...

编程日记 2023/12/31 23:32:13

软件测试/测试开发丨Linux进阶命令（curl、jq）

1、 curl 接口请求 curl是一个发起请求数据给服务器的工具curl支持的协议FTP、FTPS、HTTP、HTTPS、TFTP、SFTP、Gopher、SCP、Telnet、DICT、FILE、LDAP、LDAPS、IMAP、POP3、SMTP和RTSPcurl是一个非交互的工具 2、 curl 发起 get 请求 -G&#xff1a;使用get请求-d&#xf…...

编程日记 2023/12/31 23:31:12

模式识别与机器学习-SVM（带软间隔的支持向量机）

SVM&#xff08;带软间隔的支持向量机&#xff09; 软间隔思想的由来软间隔的引入 谨以此博客作为复习期间的记录。 软间隔思想的由来 在上一篇博客中&#xff0c;回顾了线性可分的支持向量机,但在实际情况中&#xff0c;很少有完全线性可分的情况&#xff0c;大部分线性可分…...

编程日记 2023/12/31 23:29:10

CentOS 7 firewalld+ipset+定时任务防御ssh暴力破解——筑梦之路

对于暴露在公网上的linux服务器&#xff0c;很容易被暴力破解登陆&#xff0c;为了增强服务器的安全性&#xff0c;因此对于ssh安全加固是很有必要的&#xff0c;这里主要介绍centos7 系统如何使用ipsetfirewalld定时任务来对ssh服务进行安全加固。 定义firewalld ipset fire…...

编程日记 2023/12/31 23:28:09

ElasticSearch的RestClient结合Sniffer提高可用性

一、背景 由于要安装分词器插件&#xff0c;所以需要重启ElasticSearch集群以使得新安装的插件生效 但是在重启集群的过程中&#xff0c;服务端代码却出现了大量错误&#xff0c;如下所示 java.net.ConnectException: Connection refused    at org.elasticsearch.client.R…...

编程日记 2023/12/31 23:27:08

0.001秒的革命：毫秒用算如何改写算力规则？

中国算力网络的升级之路 过去十年&#xff0c;中国建成了全球最密集的5G网络和最广泛的光纤覆盖。过去五年&#xff0c;算力规模迅速扩张&#xff0c;“东数西算”工程全面铺开。 但当AI大模型开始嵌入日常交互、低空经济在多个城市试点运行、智能网联汽车进入规模化测试阶段…...

编程新知 2026/5/13 19:13:35

CodeMaker完整指南：5分钟掌握IntelliJ IDEA智能代码生成插件

CodeMaker完整指南&#xff1a;5分钟掌握IntelliJ IDEA智能代码生成插件 【免费下载链接】CodeMaker A idea-plugin for Java/Scala, support custom code template. 项目地址: https://gitcode.com/gh_mirrors/co/CodeMaker 还在为Java和Scala项目中的重复编码工作而烦…...

编程新知 2026/5/13 18:27:44

AI提示工程与创意工作流：Claude+Cursor高效协作心法

1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫 zupp6869/claude-cursor-tips-for-creatives 。光看名字&#xff0c;你可能觉得这又是一个关于AI代码助手Cursor的普通教程合集。但如果你点进去&#xff0c;特别是你本身从事创意、设计、内容创作…...

编程新知 2026/5/13 17:52:08

长期使用Taotoken Token Plan套餐在项目开发中的成本节省感受

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 长期使用Taotoken Token Plan套餐在项目开发中的成本节省感受 1. 项目背景与计费模式选择 我们团队负责一个中型规模的AI应用项目…...

编程新知 2026/5/13 16:29:26

网盘下载革命：LinkSwift 如何让你在9大平台轻松获取真实下载地址

网盘下载革命&#xff1a;LinkSwift 如何让你在9大平台轻松获取真实下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云…...

编程新知 2026/5/13 16:11:45

3步打造你的专属游戏串流服务器：Sunshine终极指南

3步打造你的专属游戏串流服务器&#xff1a;Sunshine终极指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 还在为无法在客厅大电视上玩PC游戏而烦恼吗&#xff1f;想在平板上继…...

编程新知 2026/5/13 15:20:33

告别公网IP焦虑：用SakuraFrp免费隧道，5分钟搞定Linux服务器的SSH远程访问

5分钟实现无公网IP的Linux服务器远程访问&#xff1a;SakuraFrp实战指南 当你需要在外紧急处理家中或办公室的Linux服务器时&#xff0c;却发现没有公网IP无法远程连接&#xff0c;这种焦虑我深有体会。去年深夜的一次线上故障让我深刻认识到内网穿透工具的重要性——当时我正…...

编程新知 2026/5/13 14:25:46

量化交易工具箱全景：从数据回测到实盘部署的完整指南

1. 系统性交易资源全景图&#xff1a;从入门到精通的工具箱如果你对用代码和数学模型在金融市场里“掘金”感兴趣&#xff0c;那你来对地方了。系统性交易&#xff0c;或者说量化交易&#xff0c;早已不是华尔街大机构的专利。随着开源工具的爆发式增长&#xff0c;任何一个有编…...

编程新知 2026/5/13 14:00:54

从MATLAB到FPGA：高效生成三种波形COE文件的实战指南

1. COE文件格式解析与FPGA应用场景 COE文件是Xilinx FPGA设计中用于初始化Block RAM&#xff08;BRAM&#xff09;的标准文件格式。我第一次接触这种文件时&#xff0c;发现它其实就是一个带有特定格式要求的文本文件&#xff0c;但正是这种简单的结构&#xff0c;让它成为MATL…...

编程新知 2026/5/13 13:42:24

使用Taotoken后API调用延迟稳定在可接受范围且账单清晰可见

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用Taotoken后API调用延迟稳定在可接受范围且账单清晰可见 1. 引言 对于需要集成大模型能力的开发者而言&#xff0c;除了模型效…...

编程新知 2026/5/13 13:09:20