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

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

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


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)