本文实例讲述了WordPress增加返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下：
返回顶部效果不是WordPress自带的功能,这是一款js或jquery的效果,这里就来给大家介绍在WordPress中增加反回顶部效果的方法.
第一步:在下面主题文件footer.php底下加上这段代码:

•   
  
• TOP 
  

top.js代码如下:

• // 
  
• 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) {  
  
• 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建站有所帮助。

来源：https://zhuji.jb51.net/wordpress/7773.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！