• 售前

  • 售后

热门帖子
入门百科

WordPress增长返回顶部结果的方法

[复制链接]
dxf17 显示全部楼层 发表于 2021-8-15 19:37:47 |阅读模式 打印 上一主题 下一主题
本文实例讲述了WordPress增长返回顶部结果的方法。分享给大家供大家参考。具体实现方法如下:
返回顶部结果不是WordPress自带的功能,这是一款js或jquery的结果,这里就来给大家先容在WordPress中增长反回顶部结果的方法.
第一步:在下面主题文件footer.php底下加上这段代码:

复制代码代码如下:<script src="top.js" type="text/javascript" charset="utf-8"></script >  
<div id="scroll"><a href="javascript:void(0)"  title="返回顶部">TOP</a></div>
top.js代码如下:

复制代码代码如下://<![CDATA[  
var goto_top_type = -1;  
var goto_top_itv = 0;  
function goto_top_timer()  
{  
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;  
var moveby = 15;  
y -= Math.ceil(y * moveby / 100);  
if (y < 0) {  
y = 0;  
}  
if (goto_top_type == 1) {  
document.documentElement.scrollTop = y;  
}  
else {  
document.body.scrollTop = y;  
}  
if (y == 0) {  
clearInterval(goto_top_itv);  
goto_top_itv = 0;  
}  
}  
function goto_top()  
{  
if (goto_top_itv == 0) {  
if (document.documentElement && document.documentElement.scrollTop) {  
goto_top_type = 1;  
}  
else if (document.body && document.body.scrollTop) {  
goto_top_type = 2;  
}  
else {  
goto_top_type = 0;  
}  
if (goto_top_type > 0) {  
goto_top_itv = setInterval('goto_top_timer()', 50);  
}  
}  
}  
//]]>
第二步:在主题文件style.css文件中加入以下样式:

复制代码代码如下:/*返回顶部*/  
#scroll {display:block; width:30px; margin-right:-380px;  
position:fixed;  
right:50%;  
top:90%;  
_margin-right:-507px;  
_position:absolute;  
_margin-top:30px;  
_top:expression(eval(document.documentElement.scrollTop));  
}  
#scroll a {  
display:block;  
float:right;  
padding:9px 5px;  
cursor: pointer;  
background-color:#444;  
color:#fff;  
border-radius:5px;  
text-decoration: none;  
font-weight:bold;  
}  
#scroll a:hover {  
background-color:#333;  
color:#669900;  
text-decoration: none;  
font-weight:bold;  
}
如许我们再清除缓存是不是就可以看到有个返回顶部的结果按钮了,如许你的WordPress博客中的全部页面都会有返回顶部结果了.
渴望本文所述对大家的WordPress建站有所资助。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作