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

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

news 2025/9/4 23:45:36

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

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

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

查看全文

http://www.lryc.cn/news/270498.html