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

给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教程

返回首页