主题手术之jQuery平滑导航

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

 

记得在做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://ajax.googleapis.com/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 发表,本文链接:http://kayosite.com/jquery-smooth-navigation.html

评论列表

  • 评论者头像
    回复

    貌似这里取消了这种效果

    • 评论者头像
      回复

      @Youth.霖 是的,这个主题以简洁为主,平滑向上响应不够迅速,不适合用在这个主题中,就取消了!

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O