唉 几天没写点东西啦. 昨天到网上又转了一圈 看到了这个jQuery 上下浮动滚动.原来也看到人家的博客上有,效果不错所以就给自己也整上了.感觉还不错.呵呵

下面说说折腾过程. 说来全部都是人家的东西.也就是记录一下吧. 源代码地址 捣鼓笔记,在 安装的时候还遇到了问题.多亏 木木(此木木非彼木木,大家不要弄混了 :evil: ) 帮助我才弄好了.

首先是加载jquery库,已经有的就跳过了(philna2跳过).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

然后将html部分加入到< /body>前

<div id="updown">
<div id="up"></div>
<div id="comt"></div>
<div id="down"></div>
</div>

然后将CSS部分加入到style.CSS文件中

#updown {
 display:block;
 left:50%;
 margin-left:-520px;  /*设置横向位置*/
 position:absolute;
 top:40%;  /*设置纵向位置*/
 }
 #up {
 background:url(images/updown.gif) -34px 0 no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }
#comt {
 background:url(images/updown.gif) no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }
 #down {
 background:url(images/updown.gif) -68px 0 no-repeat;
 cursor:pointer;
 height:32px;
 margin:10px 0;
 position:relative;
 width:32px;
 }

最后是jquery函数部分啦

 jQuery(document).ready(function (a) {
    var c = a("#updown").offset().top;
    $body = window.opera ? document.compatMode == "CSS1Compat" ? a("html") : a("body") : a("html,body");
    a(window).scroll(function () {
        a("#updown").animate({
            top: a(window).scrollTop() + c + "px"
        },
 {
     queue: false,
     duration: 500
 })
    });
    a("#up").click(function () {
        $body.animate({
            scrollTop: "0px"
        },
 1000)
    });
    a("#down").click(function () {
        $body.animate({
            scrollTop: a("#footer").offset().top
        },
 1000)
    });
    a("#comt").click(function () {
        $body.animate({
            scrollTop: a("#comments").offset().top
        },
 1000)
    })
});

针对philna2的做法是 在主题目录的js目录里面新建一个 updown.js文件,然后把上面的函数代码加到里面.然后修改js.php文件.添加上这个js文件的名字就好了. 或者是在head中添加一条类似加载jquery库的方法,加载这个js文件即可.

css部分针对自己的情况再改一下吧. 哦 用到的图片,在 捣鼓笔记上有一个图标,我现在使用的图标是 狼图腾博客中使用的图标,希望他不要介意啊 :evil: 好了.记录完毕.

---

无事又到木木(此处的木木是林木木,额,两个木木,不知道该怎么区分了 :jiong: )博客上看了看.找了点东西.

关于这个滑动导航的部分,他那里有一个貌似更好点的代码.可以放上鼠标慢慢向上向下滚动,只不过图标不是上下浮动而是固定位置的了.我发现貌似这样固定住更好,这样显得比较简单一点.于是我就把样式改成了那个了. 下面只说我用到的部分,想要自己研究的,就去原文看吧.上面已经有了.

html代码不变,css代码也不变,主要就是jquery函数部分变换一下就好了

jQuery(document).ready(function($){
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');//修复Opera滑动异常地，加过就不需要重复加了。
$('#shang').mouseover(function(){//鼠标移到id=shang元素上触发事件
        up();
    }).mouseout(function(){//鼠标移出事件
        clearTimeout(fq);
    }).click(function(){//点击事件
        $body.animate({scrollTop:0},400);//400毫秒滑动到顶部
});
$('#xia').mouseover(function(){
        dn();
    }).mouseout(function(){
        clearTimeout(fq);
    }).click(function(){
        $body.animate({scrollTop:$(document).height()},400);//直接取得页面高度，不再是手动指定页尾ID
});
$('#comt').click(function(){
    $body.animate({scrollTop:$('#comments').offset().top},400);//滑动到id=comments元素，遇到不规范的主题需调整
});
});
//下面部分放jQuery外围，几个数值不妨自行改变试试
function up(){
   $wd = $(window);
   $wd.scrollTop($wd.scrollTop() - 1);
   fq = setTimeout("up()", 50);
}
function dn(){
   $wd = $(window);
   $wd.scrollTop($wd.scrollTop() + 1);
   fq = setTimeout("dn()", 50);
}

将上面的ID号换成你的html代码中的ID号就好了.具体的你可以试着改一下那些时间参数,让速度变得快些或者慢些