WordPress添加前往顶部成果的办法

本文实例讲述了WordPress添加前往顶部成果的办法。分享给大家供大家参考。详细完成办法如下:

前往顶部成果不是WordPress自带的性能,这是一款js或jquery的成果,这里就来给大家引见在WordPress中添加反回顶部成果的办法.

**步:在上面主题文件footer.php底下加上这段代码:

<script src="top.js" type="text/javascript" charset="utf-8"></script >  
<p id="scroll"><a href="javascript:void(0)" onclick="goto_top()" title="前往顶部">TOP</a></p>

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建站有所协助。

以上就是安达网络工作室关于《WordPress增加返回顶部效果的方法》的一些看法。更多内容请查看本栏目更多内容!

本文相关话题: WordPress 增加 返回顶部 效果 方法
版权声明:本文为 安达网络工作室 转载文章,如有侵权请联系我们及时删除。
相关文章
管制好你的 Wordpress 侧边栏

当然 Wordpress 2.7 里有&ldquo;小工具&rdquo;选项也能管制 Widget ,然而重复试验后发现款式无奈对立,可控...

WordPress完成评论提交后跳转的办法

很多采纳WordPress顺序搭建的博客都相当注重与读者之间的互动,以评论为例,为了进步读者的体验品质,有的博...

WordPress在IIS效劳器上的伪动态设置办法(处理中文URL无奈拜访成绩)

咱们都晓得WordPress顺序很弱小,对搜寻引擎优化很敌对,然而有一点可能有些人还不是很分明,关于WordPress这样...

wordpress之wp_nav_menu应用阐明

其次要用处是经过该办法, 完成后盾的生成菜枯燥用。 应用该性能之前,必需激活主题3.0+菜单性能。 办法如下...

WordPress博客顺序常见谬误的处理办法

  WordPress是支流的 Blog 搭建平台。 WordPress 能够说是世界上目前最先进的 weblog 顺序。目前开发的顺...

WordPress后盾的内容治理性能

要害字形容:性能 治理 内容 后盾 文章 分类 页面 文件 能够 删除 上一次教程咱们解说了应用Wordpress来撰...

需求提交

客服服务

亿鸽在线客服系统