jQuery的强大不用说了，发现好多博主都在自己是主题上加载了，各种效果让我羡慕不已。最近我也开始折腾起来了，一直在系统的学习中。今天给博客加了一个固定在屏幕某处的上下导航按钮，一个简单实用的东西，顺便说说jQuery代码的使用方法，所以这篇文章是我学习jQuery入门基础篇。
一：在html的head标签中加载jQuery库
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script>
这个也可以下载到自己的服务器上然后调用。
二：加载含有jQuery代码的js文件
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/buttonNav.js”></script>
这一句一定要加在第一句后面，js放在主题文件夹下的js目录里。JS代码如下：
jQuery(document).ready(function($){
$('.buttonUp').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('.buttonDown').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
});
这里还可以添加实现上下滑动的动态效果代码，我一直觉得还是直接用CSS固定在某个位置好看，就不加了。
三：在需要加载效果的页面适当位置加上以下代码：
这个我也放在header.php中了，全局显示。
四:在主题主题样式style.css中加入以下代码：
/* button START */
.buttonNav {
display:block;
left:63%;
top:65%;
position:fixed;
bottom:auto;
}
.buttonUp {
background:url("img/buttonUp.gif") no-repeat;
height:30px;
width:9px;
margin:10px 0;
position:relative;
cursor:pointer;
}
.buttonDown {
background:url("img/buttonDown.gif") no-repeat;
height:30px;
width:9px;
margin:10px 0;
position:relative;
cursor:pointer;
}
/* button End */
图片放在主题文件夹下的img目录里，自己做一个好看的吧，显示的位置和图像大小就按自己的主题再适当调整下。咳咳，不知道能不能看到我的呢，很小哦，嘿嘿。
以上就是我低阶版效果的全部步骤，以后再慢慢改进。
评论
《 “jQuery-页面固定导航按钮” 》 有 29 条评论
沙发哈~呵呵~
@小松, 额哈哈哈，还真是快啊~
板凳。然后再细看~
@宋夏, 那就慢慢看下吧~ :微笑:
地板也不放，哈哈。很不错啊~后面应该会添加越来越多JQ效果吧
@OnC, 恩恩~是嘀~
这个滑动有了，支持一下
@阿修, 我今天才加上，感觉良好~
嘿嘿 加油折腾吧·
@阿邙, 恩恩，每天折腾一点~
呵呵学习了。JQ看来已经成趋势了，我也得找个时间学习下了！ :嘻:
@人好哇！, 对啊对啊，要补补课了~
这个还没研究过，给了我研究方向~
:大兵: 每日任务完成，你懂的~
@风小, :嘻:
强,天天折腾 呵呵
@迎接, :微笑: 折腾一天，学习一天~
很显然我没看懂，我不会技术
@陈剑, 会用也好啊~ :微笑:
hoho 恩 lzg01.com谢谢分享~
可惜看不懂，不然我也试一下。
@谢婷婷, 看到会用就可以了，不用写代码~
:强: 迟点过来转走.
@yu, :微笑: 欢迎的~
:嘻: 恩
研究的还蛮深入的
哈哈
@only博客, :嘻: 刚开始呢~
今天我AD过了~
@小周博客, :尴尬: 别留言这个~
记住了 学习了
@徐炜, 呵呵，自己也弄一个吧~