当前位置:园子博客 » Wordpress » 网站左侧添加导航功能,可快速转到顶部和底部

网站左侧添加导航功能,可快速转到顶部和底部

8月 3rd, 2010 | Filed under Wordpress | 共有12,038次浏览

园子博客很早就取消了评论分页的功能,所以页面整体看来会变的比较长。今天要实现的就是在页面左侧添加一个通过点击可以起到导航作用的小功能,使网站变的更加人性化。

版权说明:这篇文章灵感来源于林木木的:“返回顶部”加强版代码及释义,版权归作者所有哈。

网站导航功能实现效果

因为现在博客宽度为990px,所以设定的是如果在分辨率是1024×768的显示器上访问网站的话就不显示左侧的导航功能栏。你也只有在比此分辨率大的显示器上才可以看到导航工具效果。导航区域有三个图标,上下分别是点击回到页首和页尾。中间的按钮点击之后会转到文章的评论区域,可以方便用户阅读评论。

出于人性化考虑,只有在文章页面才会出现中间的那个阅读评论导航,因为只有这个页面有评论。呵呵。先来看看导航工具的显示效果吧,你可以点击下。

园子博客左侧导航功能

园子博客左侧导航功能

导航功能实现过程

1.在你主题文件 footer.php 中添加如下代码:

1
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>

注意要加在 body 结束标签之前。

2.在主题文件 style.css 中加以下样式:

1
2
3
4
#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;}
#shang{background:url(img/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(img/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(img/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

提示:样式中的 margin-left:-535px;需要根据自己网站的显示效果自行调试,负值越大越靠近左侧屏幕边缘。

3.通过 jQuery 实现点击相应图标后,定位到相应的位置。

不会使用 jQuery 的朋友请看这里:如何在 WordPress 中使用 jQuery

所用到的 jQuery 代码如下:

1
2
3
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});

4.使用 jQuery 实现滑动效果

园子建议建立一个js文件在主题中调用,连同第三步中提到的代码加入到js文件中即可。现在总的js文件代码如下:

1
2
3
4
5
6
7
jQuery(document).ready(function($){
var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
});

5.调用所需js文件

在主题中调用第四步建立的 .js 文件,假设你建立的文件名为 all.js,那么直接在主题文件 header.php 中的 head 区域添加如下样式代码即可:

1
<script type="text/javascript" src="http://www.yourdomain/all.js"></script>

6.只有有评论的页面才显示阅读评论的链接

以上五步其实已经实现滑动导航功能了,只是有个缺点就是在像首页面这样没有网友评论的地方,也会出现转到评论的图片按钮,这样显然显然不合适。我们这步要实现的就是把样式表分开,在文章页面加载带有评论样式的滑动导航,其它页面则不显示转到评论按钮。

其实解决方法也就是通过php的判断语句实现的,先来看看以下代码:

1
2
3
4
5
6
7
8
9
10
11
<?php if (is_home()) { ?>
<link rel="stylesheet" href="http://www.yourdomain/index.css" type="text/css" />
<?php } elseif( is_single() ) { ?>
<link rel="stylesheet" href="http://www.yourdomain/style-single.css"  type="text/css" />
<?php } elseif( is_category() || is_archive() || is_search() ) { ?>
<link rel="stylesheet" href="http://www.yourdomain/style-category.css"  type="text/css" />
<?php } elseif( is_page(104) ) { ?>
<link rel="stylesheet" href="http://www.yourdomain/style-links.css"  type="text/css" />
<?php } else { ?>
<link rel="stylesheet" href="http://www.yourdomain/style.css" type="text/css" />
<?php } ?>

来解释下这几行判断语句,当打开首页面的时候加载index.css,打开文章页面加载style-single.css,打开分类页面、归档页面、搜索结果页面时加载style-category.css,打开页面ID号为104时,加载style-links.css,其它页面加载style.css。

OK,我们需要把第二步提示到的样式表分为两个存放,比如把以下样式放在 other_hd.css 文件中:

1
2
3
#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;}
#shang{background:url(img/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#xia{background:url(img/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

把下面的样式放在 single_hd.css 样式中:

1
2
3
4
#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;}
#shang{background:url(img/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(img/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(img/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}

然后我们在你所用主题的 header.php 文件的 head 区域,加上以下判断语句即可:

1
2
3
4
5
<?php if (is_single()) { ?>
<link rel="stylesheet" href="http://www.yourdomain/single_hd.css" type="text/css" />
<?php } else { ?>
<link rel="stylesheet" href="http://www.yourdomain/other_hd.css" type="text/css" />
<?php } ?>

这样就实现了打开文章页面时,显示的是带有转到评论功能的滑动导航,其它页面将不会出现转到评论这个导航按钮。

通过以上的操作就实现了在网站左侧添加导航功能的效果,此效果完美兼容IE6/7/8、Firefox等主流浏览器。你可以在本页面左侧点击测试下效果,有什么问题留言给我哦。

本教程相关素材下载

园子把使用到的导航图片、JS文件打包后供大家下载,可以省去你去做这些小素材的时间。

点此下载

  1. fjutwangbin
    9月 26th, 201223:13

    这个网站可以帮忙去看下什么问题么?效果显示不怎么对!

  2. fjutwangbin
    9月 26th, 201222:18

    是不是代码搞错了啊,前面光用style.css时,还显示出来了,后面用两个css判断,出都出不来了!

  3. V_v
    3月 15th, 201211:16

    你好,我现其他页面的功能都能用,但只有首面上面的上下图标没有反应
    这个能解决吗?

  4. Jack
    10月 15th, 201105:35

    你好,搜索回到顶部js来到你的页面,做的很好看,我照着做了,可是我的网站显示不出效果。我想请教一下第二步“2.在主题文件 style.css 中加以下样式”
    添加样式要在什么之间吗?怎么我的显示不出来。。。照片,js都弄了上去

    • 园子
      10月 18th, 201109:12

      @Jack
      就是添加到CSS文件中就行了,添加到最后或者开始的地方都行。

  5. Mlx
    9月 24th, 201116:18

    你好,我的图案就是不能显示评论这部分的图案啊,这个是什么情况造成的?而且我的导航图片在点击时周围会有框框出现这个怎么解决?

  6. cheeco
    8月 27th, 201123:22

    有时喜欢,有时不喜欢左栏的跟随功能,在为可能会影响阅。 记得有一个人的是在右边,是一个很细的线,感觉上还可以,不过忘记了网址,也是WP博客。

  7. 软件志
    7月 1st, 201116:50

    到页面底部失效! 怎么搞?

  8. SayMe
    4月 2nd, 201110:05

    看着好麻烦哦.呵呵.我的主页设置的显示文章数不多 再加上more标签隐藏的话.估计应该用不上啦.

  9. vividone
    3月 24th, 201121:06

    我的功能都实现了,只是在主面上时还是有评论那个框框,我是照着文中写的做完了,可是还不行,怎么回事?
    把第二步中style.css添加那四段代码注释也不行

  10. ShunYea
    3月 12th, 201112:43

    我今天也学习你的这个加入了侧面的导航,但是貌似发现个小小的问题,就是从其他页面跳转过来时候,如果跳转到页面中间某一个位置,侧面那个导航图片不会出现,需要轻轻的滑动一下鼠标滚轮,就是相当于上或下移动一下页面,侧面那个导航才会快速移动过来。
    我看木木木的那个不会的,只要你随便在页面那个位置,侧面导航立即就定位到相应位置了。
    请教要怎么修改一下才能比较完美呢?谢谢。

    • 园子
      3月 14th, 201116:57

      @ShunYea
      这个我还真没有注意到
      我的就是用的是木木的方法
      可能他又做优化了?
      有时间了我看看去。

  11. 蚊子
    3月 1st, 201123:46

    烦死了..这么多内容..如果有一个插件就好了 更新主题也可以用

  12. 老大网络
    1月 4th, 201111:51

    我的有点问题
    只有回顶部有效
    评论及底部都不好用是怎么回事

  13. John
    12月 29th, 201013:57

    园子,好像下载后无法解压?

  14. Jessy
    12月 27th, 201017:38

    已拿走,谢谢园子分享……

  15. 康橋
    11月 4th, 201000:03

    實驗了很多次才成功的,折騰得很開心,感謝樓主這麼詳細的教程!

  16. yesureadmin
    11月 2nd, 201008:45

    到顶部的位置怎么控制,我点向上滑到太上面去了

  17. yesureadmin
    11月 1st, 201019:39

    方法我偷走了,很不错,但是和你一样还存在一个问题,哪就是点评论,不会滑动在评论框的位置,你的也是这样的..我记得哪个朋友的,却不是,点评论自动回到评论框这里.

    • 园子
      11月 2nd, 201010:58

      @yesureadmin
      评论框一般都是在最底部的,你想要转到评论处直接把底部改成写评论就行了。
      我设置的默认就是“阅读评论”,而不是“写评论”。

  18. Weitian Zhao
    10月 29th, 201017:39

    成功了.
    很高兴~
    我的博客建立两个月不到,我也是第一次接触代码这些东西,不过真的很喜欢折腾WP.
    今天在你这里学到了这个还有在评论框添加图片,受用了~

  19. 嗜睡的蚂蚁
    10月 23rd, 201014:24

    郁闷的很啊!!我的上一个主题按照你这样弄就没问题,这个主题硬是把我折腾了一下午,不是这的问题就是那的问题。。。。。不过我还是不知道为什么我的返回底部不起作用,评论和顶部都没问题!郁闷的一天~~ 😥

  20. pyh
    10月 9th, 201019:37

    我照着做了,怎么不管用呢?

  21. zhlooo
    10月 2nd, 201014:26

    😎 呵呵 ,昨晚看了你的这个教程,今天就弄好了!还不错,谢谢分享哦~~~

  22. 随缘
    8月 14th, 201011:46

    有空去试试 😆 另外给你点下AD 😛

  23. Bee君
    8月 11th, 201015:55

    这样就调用更多的css

  24. Aerofish
    8月 10th, 201023:00

    这个效果好好,我也做到我的博客中了。谢谢。

    不过,园子你用的代码高亮插件,Ie浏览器显示都会少一行代码的,只能用Firefox正常显示。

    • 园子
      8月 11th, 201008:58

      @Aerofish
      嗯 是IE6少一行的
      有时间了折腾下
      基本上已经放弃IE6了。

      • Aerofish
        8月 11th, 201011:57

        我用IE8的,也少一行

        • 园子
          8月 11th, 201012:22

          已经更正了,谢谢你的提醒。
          WP-Syntax 代码高亮在IE中显示不正常的解决方案
          http://www.yzznl.cn/archives/wp-syntax-ie-show-abnormal.html

  25. haibor
    8月 9th, 201017:18

    这个导航很棒!

  26. 木本无心
    8月 8th, 201009:32

    您也用上了……不错的功能。

  27. 站长实验室
    8月 7th, 201015:30

    jqery有点小复杂,也就没有整过了,呵呵

  28. 稠粥稀粥
    8月 7th, 201015:02

    你好,又遇到问题了,还得请教一下:
    看你博客有
    * Css
    * AdSense
    * WordPress
    * Xhtml
    等几个分类导航,请问如何将自己首页显示的所有日志根据分类放到不同的分类导航链接下呢?比如像你一样,跟CSS有关的文章在首页能显示,在Css下也能显示。弄了一天,搞不定啊。谢谢了! 😉

  29. Pavel
    8月 7th, 201009:58

    新换主题了哈!貌似俺们这种方屏电脑看不全侧边导航
    只看到了一半箭头

  30. shekck
    8月 6th, 201023:03

    这导航比我用的那个漂亮

  31. reizhi
    8月 6th, 201016:36

    功能很不错,但是能把那个图片的PSD给出来就好了

  32. 祛斑美容产品
    8月 6th, 201012:50

    博主你好,很荣幸能路过此地,我们美容产品排行榜网站今天正式上线,不知道能否与朋友做个友情链接啊?

  33. 秦大少
    8月 6th, 201010:20

    我倒是习惯了用鼠标滚轮

  34. liveasx
    8月 6th, 201002:15

    IE6下显示按钮偏左,没居中, 😛

    • 园子
      8月 6th, 201008:23

      @liveasx
      什么显示按钮没居中呢?没说清楚。

      • liveasx
        8月 6th, 201023:23

        就是只显示了一半,用IE6打开看看,个人感觉这样不好看,不如在右下角显示吧

        • 园子
          8月 7th, 201009:06

          @liveasx
          明白你的意思了
          我的是宽屏显示器
          所以不会出现,窗口缩小后就看见显示一半了 呵呵
          暂时不改吧,有空再折腾它~

  35. 真好
    8月 5th, 201002:31

    我在Opera下面点击了评论两个字,发现滚动的最终位置不是评论框啊?奇怪。

    • 园子
      8月 6th, 201008:37

      @真好
      设置的不是写评论,而是阅读评论,写评论直接就在页面最底部,没必要转到评论框哈。

      • 真好
        8月 7th, 201009:11

        晕, 我说呢。我在有的朋友那里看见是直接转到写评论的地方。那样比较方便。

  36. Bee君
    8月 4th, 201020:36

    换新主题啦?…也是简洁型哦~

  37. 雅岚
    8月 4th, 201014:29

    一如既往地把妖女我看得头昏眼花,哈哈哈哈。。。

  38. 益酷网
    8月 4th, 201013:25

    以前的主题很好啊,这个我以前用过!

  39. su
    8月 4th, 201012:29

    呵呵园子好像是换主题了吧?

  40. 学之源
    8月 4th, 201011:30

    看得那个导航标了,还挺方便的

  41. 软件盒子
    8月 4th, 201011:19

    看到好多高手的博客里都有,呵呵

  42. 求索阁
    8月 4th, 201008:01

    来这学习技术了··嘿嘿

  43. 丕子
    8月 4th, 201007:02

    嗯 好多主题带着 模仿过来即可

  44. 飞晏
    8月 3rd, 201023:28

    以后可以照着这个做在线客服了

  45. Leyond
    8月 3rd, 201021:51

    恩,不错 收藏起来。写的很详细 😉 换主题了是吗

  46. ifenwen
    8月 3rd, 201021:35

    很不错哦 改天拿来用用

  47. A.shun
    8月 3rd, 201021:04

    终于换主题了呢。

    好详细的教程。

  48. 观尔腾
    8月 3rd, 201020:32

    其实也有道理~这样不妨把那个图标改一下就可以了吧~

  49. tal-rasha
    8月 3rd, 201020:11

    这次比较靠前

  50. 记忆盒子
    8月 3rd, 201018:55

    左边导航的符号你是不是没有显示完整呢?看起来不知道是个什么含义。要鼠标移到上面才有文字提示,不是很人性化吧,浪费操作时间。

    • 园子
      8月 4th, 201008:25

      @记忆盒子
      看来我得加些文字进去了,呵呵,没有考虑这么多。

您必须在 登录 后才能发布评论.