wordpress笔记之上下滑动条

从今天开始，我要开始一个折腾笔记，记录我折腾博客的过程。当然这里面会引用很多来自其他博客的文章。因为以后不打算再去那么折腾了，所以就全当是一个记录，以后如果自己写主题的话也是一种帮助。

由于折腾博客的时候没有像狐狸博客（这是一个很不错的博客啊，博主可是我们学院的大牛！）那样去规划，也就是看到什么好看，感觉适合我的主题，符合我的审美观，我就去折腾什么，所以整个笔记也不会有什么条理，我想到什么就去记录什么。这个笔记中的所有效果并不一定在本站能够看到，因为许多已经放弃了，但我还会做一个记录。

废话不多说什么了，先说说这个上下的滑动条，原文是来自林木木的文章，这里针对博客也做出了相应的修改。

html部分

<div id="shangxia">
<div id="shang" title="飞到顶"></div>
<div id="xia" title="滑到底"></div></div>

CSS部分

#shangxia{position:absolute;top:40%;left:50%;margin-left:-535px;display:block;}
#shang{background:url(images/xiangshang.png) no-repeat;position:relative;cursor:pointer;height:60px;width:40px;margin:50px 0;}
#xia{background:url(images/huadong.png) no-repeat ;position:relative;cursor:pointer;height:60px;width:40px;margin:50px 0;}

jQ部分

//滑动导航

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

		var c = a("#shangxia").offset().top;

		$body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") : a("body") : a("html,body");

		a(window).scroll(function () {

			a("#shangxia").animate({

				top: a(window).scrollTop() + c + "px"

			},

	 {

		 queue: false,

		 duration: 500

	 })

		});

		a("#shang").click(function () {

			$body.animate({

				scrollTop: "0px"

			},

	 1000)

		});

		a("#xia").click(function () {

			$body.animate({

				scrollTop: a("#footer_wrap").offset().top

			},

	 1000)

		});

	});

就这些了,要说明的是用jq之前要先加载jq库,至于哪个版本我就没有研究了.至于那个上下滑动的图片可以根据自己的喜好自由定义.

这是折腾笔记的第一篇.