jQuery-页面固定导航按钮

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目录里，自己做一个好看的吧，显示的位置和图像大小就按自己的主题再适当调整下。咳咳，不知道能不能看到我的呢，很小哦，嘿嘿。

以上就是我低阶版效果的全部步骤，以后再慢慢改进。