生活分类信息网站大全,wordpress导航网站,温州平面设计公司,好看的wordpress主题给WordPress网站底部添加一个按钮#xff0c;点它就可以现实快速返回到顶部。有两种方法可以现实#xff0c;一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。
给WordPress网站底部添加一个按钮#xff0c;点它就可以现实快速返回到顶部。有两种方…给WordPress网站底部添加一个按钮点它就可以现实快速返回到顶部。有两种方法可以现实一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。
给WordPress网站底部添加一个按钮点它就可以现实快速返回到顶部。有两种方法可以现实一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。 不废话直接上代码。 1、将下面这段代码添加加到footer.php/footer标签后
a href# classback-to-topi classfa 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; } 到此大功告成刷新网站就可以看到在网站的右下角会出现要添加的按钮图标了。
原文链接 https://www.mymoban.com/wp/3.html
