网站左侧添加导航功能，可快速转到顶部和底部
园子博客很早就取消了评论分页的功能，所以页面整体看来会变的比较长。今天要实现的就是在页面左侧添加一个通过点击可以起到导航作用的小功能，使网站变的更加人性化。
版权说明：这篇文章灵感来源于林木木的：“返回顶部”加强版代码及释义，版权归作者所有哈。
网站导航功能实现效果
因为现在博客宽度为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文件打包后供大家下载，可以省去你去做这些小素材的时间。
点此下载！
呵呵 ，昨晚看了你的这个教程，今天就弄好了！还不错，谢谢分享哦~~~
另外给你点下AD 
