给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; } |
到此大功告成，刷新网站，就可以看到，在网站的右下角会出现要添加的按钮图标了。