jQuery-页面固定导航按钮

/ 29评 / 0

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

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

  1. 徐炜说道:

    记住了 学习了

  2. 小周博客说道:

    今天我AD过了~

  3. only博客说道:

    :嘻: 恩
    研究的还蛮深入的
    哈哈

  4. yu说道:

    :强: 迟点过来转走.

  5. 谢婷婷说道:

    可惜看不懂,不然我也试一下。

  6. lzg01说道:

    hoho 恩 lzg01.com谢谢分享~

  7. 陈剑说道:

    很显然我没看懂,我不会技术

  8. 迎接说道:

    强,天天折腾 呵呵

  9. 风小说道:

    这个还没研究过,给了我研究方向~
    :大兵: 每日任务完成,你懂的~

  10. 人好哇!说道:

    呵呵学习了。JQ看来已经成趋势了,我也得找个时间学习下了! :嘻:

  11. 阿邙说道:

    嘿嘿  加油折腾吧·  

  12. 阿修说道:

    这个滑动有了,支持一下

  13. OnC说道:

    地板也不放,哈哈。很不错啊~后面应该会添加越来越多JQ效果吧

  14. 宋夏说道:

    板凳。然后再细看~

  15. 小松说道:

    沙发哈~呵呵~

Comments have been closed.