主题手术之jQuery平滑导航

时间：2011年3月5日分类：JavaScript , WordPress 标签：jQuery‚ 平滑导航评论：2

还是一篇应该早写的文章，刚好今天周六，是个好机会噢！

记得在做Kayo 2011 2.0时，就打算采用Ajax分页的方式，代替原来的传统分页了。在建站初期，网站的文章比较少，想看后面的文章拉动滚动条即可，后来文章多了，看到网站底部后又要拉滚动条上去，显得十分不便。基于本人一直都想改进网站的UE，便马上想到做一个“返回顶部”之类的按钮，方便读者浏览本站。后来搜集相关的资料，发觉用jQuery和纯css都可以做出一个返回顶部或底部的导航按钮，因为之前的Ajax评论让我感到jQuery强大的力量，因此我选择使用jQuery平滑导航。

既然是jQuery做的，那么第一步当然是要加载jQuery库，虽然Wordpress有自己的内置jQuery库，不过我在本地调试时发现使用Wordpress内置的jQuery库并没有效果。可能是Wordpress内置的jQuery库被删减了一些功能，于是果断调用Google Ajax库api提供的jQuery库，推荐使用1.3.2，测试过几个版本，这个最适合。

如果你的主题的header.php里有下面那么一句：

<?php wp_enqueue_script('jquery');  ?>

即表明你的主题已调用Wordpress内置的jQuery库，只要把上面那句替换为：

<script type="text/javascript" src="http://gapis.geekzu.org/ajax/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

即可加载谷歌的jQuery库。

接下来就是平滑导航的实现代码，因为我们一般需要在每个页面都使用平滑导航，所以只能把代码放在header.php或footer.php等每个页面都有的部分，但考虑到javascript放在底部，就可以和图片几乎同时下载，让图片尽快的下载下来，加快整个页面加载，所以还是推荐把平滑导航的代码放到footer.php。

<div id="shangxia" style="top: 400px; "><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>

<script type="text/javascript">

jQuery(document).ready(function($){

var s=$('#shangxia').offset().top;$(window).scroll(function(){$("#shangxia").animate({top:$(window).scrollTop()+s+"px"},{queue:false ,duration:500})});

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);});

$('#comt').click(function(){$('html,body').animate({scrollTop:$('#respond').offset().top}, 1300);});

$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 1000);});

});

</script>

这里要稍作解释：红色高亮的为该动作的执行时间，即数值越小，页面平滑的速度越快。

以下是我的css，大家可以根据实际情况自行修改：

#shangxia{position:absolute;top:35%;right:50%;margin-right:-573px;display:block;}

#shang,#comt,#xia{background:url(images/huadong.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0;}

#comt{background-position:center -30px;height:32px;}#xia{background-position:center -68px;}

最后把下面的图片放到你主题的图片文件夹中（这里使用的是Kayo正在使用的图片，在immmmmm.com里找到的，大家可以用自己喜爱的图片代替）

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/jquery-smooth-navigation.html

主题手术之jQuery平滑导航

你可能也喜欢

评论列表

回复