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

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

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

网站导航功能实现效果

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

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

园子博客左侧导航功能

园子博客左侧导航功能

导航功能实现过程

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

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

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

#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 代码如下:

$('#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文件代码如下:

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 区域添加如下样式代码即可:


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

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

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












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

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

#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 样式中:

#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 区域,加上以下判断语句即可:






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

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

本教程相关素材下载

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

点此下载

网站左侧添加导航功能,可快速转到顶部和底部》上有70条评论

  1. Jack

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

  2. Mlx

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

  3. cheeco

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

  4. vividone

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

  5. ShunYea

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

  6. yesureadmin

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

    1. 园子 文章作者

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

  7. 嗜睡的蚂蚁

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

  8. 稠粥稀粥

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

发表评论