WordPress页脚添加“回到顶部↑”链接

因为各种原因,WordPress博客的页面越来越长,其结果导致滚动条变得很长很长。访问者从页面顶部到底部,再从底部回到顶部,使用鼠标滚轮的话是很“痛苦”的事。这时候页面底部的“回到顶部↑”链接就很实用了。

当然了,要实现回到页面顶部的方法有很多,选择自己喜欢的就ok。

11052102

下面分享下在“一起知道”中使用的方法。

1.下载下面两个js文件:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

http://www.dynamicdrive.com/dynamicindex3/scrolltopcontrol.js

2.在scrolltopcontrol.js里面找到

<img src="up.gif" style="width:48px; height:48px" />

3.将代码中的图片和样式修改或直接改成如下文字形式

<a href="#header">回到顶部↑</a>

4.自己在css文件里面给top定义一个样式就可以。不过不定义也没问题。

5.在head里面插入以下代码

<script type="text/javascript" src="域名地址/jquery.min.js"></script>

<script type="text/javascript" src="域名地址/scrolltopcontrol.js"></script>

注意:如果之前已有使用jquery,那么步骤5中第一行代码可不加。另外,jquery.min.js库文件本身较大,使用后多少会对访问速度造成一定影响。

“返回顶部”的其他方法

1.使用锚点:

只需要在footer文件中添加如下代码:

<a href="#header">回到顶部↑</a>

或者:

<body>
<a name="pagetop" />

然后在需要显示“回到顶部↑”的地方加入

<a href="#pagetop">回到顶部↑</a>

2.直接按键盘上的“Home键”(o(∩_∩)o 哈哈)

赞 (0)

评论 11

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. yoke你那个小人怎么弄的呀?回复
  2. lemon全部死代码 看不懂,有木有插件回复
  3. 该用户不在线可以写成插件形式,不用修改任何系统文件的。 add_filter( 'before', 'returntop'); function returntop(){ echo"<script type='text/javascript' data-original=‘js路径'></script>"; echo"<div id='一些代码'></div>"; }回复
  4. Steven Kwok如果wordpress里本身没有引用jquery,而为了达到这个效果而引用这个30来k的脚本,还有scrolltopcontrol这个脚本,有些不太值(从追求网页加载速度这方面考虑)。 如果这样的话,我宁愿直接加个锚点链接直接返回顶部了 😆回复
  5. 文夕@cioye http://www.17zhidao.com/ 就这个,你的就放你的网站的域名了~回复
  6. cioye域名地址,这是什么? 🙁回复
  7. 文夕@雨丸 😆回复
  8. 文夕@cioye 😉 ,是的。回复
  9. cioye你博客右下回到顶部是这个代码吗? 😉回复
  10. 雨丸学习了·谢谢分享@!回复