WordPress增加返回顶部效果代码 - WordPress

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)"  onclick= "goto_top()"  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增加返回顶部效果代码 - WordPress的详细内容...