WordPress增加返回顶部效果的方法

WordPress增加返回顶部效果的方法

本文的重点是详细介绍增加返回WordPress顶部效果的方法。根据自定义js文件的介绍完成回头率的效果，有很大的现实意义，盆友们一定要参考。

本文介绍了WordPress增加返回顶部效果的方法。分享给大家参考。实际完成方法如下:

回顶效果不是WordPress的内置功能，而是js或者jquery的效果。下面详细介绍一下如何在WordPress中添加返回顶部效果。

第1步:将此代码添加到以下主题文档的footer.php下面:

复制下面的代码:<；divid="scroll"><ahref="JavaScript:void(0)"onclick="goto_top()"title="Backtotop">；TOP</a>；</div>；
top.js代码如下:

复制代码如下://<！[CDATA[
vargoto_top_type=-1；
vargoto_top_ITV=0；
functiongoto_top_timer()
{
vary=goto_top_type==1？document.documentelement.scrolltop:document.body.scrolltop；
varmoveby=15；
y-=math.ceil(y*moveby/100)；
如果(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；
}
}
functiongoto_top()
{
if(goto_top_ITV==0){
if(document.documentelement&；&document.documentelement.scrolltop){
goto_top_type=1；
}
elseif(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；宽度:30px右边距:-381080x；
位置:固定；
右:50%；
top:90%；
_margin-right:-507px；
_position:绝对；
_margin-top:30px；
_top:expression(eval(document.documentelement.scrolltop))；
}
#scrolla{
display:block；
float:右；
填充:9px5px
cursor:指针；
背景色:#444；
color:#fff；
border-radius:5px；
text-decoration:无；
font-weight:bold；
}
#scrolla:hover{
background-color:#333；
color:#669900；
text-decoration:无；
font-weight:bold；
}
然后，如果再次清空缓存，就可以看到一个按钮，效果是返回顶部。然后，你的WordPressblog中的所有页面都会有返回顶部的效果。

期待以上对大家的WordPress网站有所帮助。