模板帝

您当前的位置:首页 > WordPress教程

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

时间:2023-12-16 浏览:12

给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;
}

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

返回顶部,WordPress教程

无相关信息
  • 轻量应用服务器 2核2G
    50GB 高效云盘,限峰值带宽 3M
    实例类型
    服务器实例
    购买时长
    1年
    购买数量
    1台
    • 限1件 新人专享
    • 优惠后99.00/1年
    • 日常价: ¥1334.40/1年
阿里云主机

最新模板