小巧“回到顶部”的滑动块

你在浏览别人的博客时你会发现有个非常有意思的东西，他就是快速回到顶部、回到底部的按钮，如果在加上漂亮的Jquery代码，岂不是更漂亮好看，
现在给大家分享一种飞一般的回到顶部、回到底部的按钮的方法。

款式一鼠标碰触自动滑行

适合放在您的博客中，以自己的喜好和主题的颜色可以用Photoshop修改色调。

把以下代码放到你博客的footer.php中，这样有利于页面的加载速度。

把以下样式(css)添加到博客的style.css中。

<code>
#shangxia{bottom:100px;margin-right: -500px;right: 50%;position: fixed;display:block;}
#shang{background:url(images/sprite.png) no-repeat -60px 0;position:relative;cursor:pointer;height:21px;width:21px}
#shang:hover{background:url(images/sprite.png) no-repeat -60px -42px}
#xia{background:url(images/sprite.png) no-repeat -60px -21px;height:21px;width:21px;margin-top:8px;cursor:pointer}
#xia:hover{background:url(images/sprite.png) no-repeat -60px -63px}
</code>

其中需要一张图片，鼠标邮件保存，并放到到你博客主题的images中就行。

最后需要的是添加javascript脚本了，也就Jquery，添加到你博客的Js文件中（请按自己的主题，添加到相应js文件中。）

<code>
jQuery(document).ready(function(a) {
    a("#shang").mouseover(function() {
        up()
    }).mouseout(function() {
        clearTimeout(fq)
    }).click(function() {
        a("body").fadeTo("100", 0.5,
        function() {
            $body.animate({
                scrollTop: 0
            },
            700,
            function() {
                a("body").fadeTo("100", 1)
            })
        })
    });
    a("#xia").mouseover(function() {
        dn()
    }).mouseout(function() {
        clearTimeout(fq)
    }).click(function() {
        a("body").fadeTo("100", 0.5,
        function() {
            $body.animate({
                scrollTop: a(document).height()
            },
            700,
            function() {
                a("body").fadeTo("100", 1)
            })
        })
    });
    a(".comments_number").click(function() {
        a("body").fadeTo("100", 0.5,
        function() {
            $body.animate({
                scrollTop: a("#comment").offset().top
            },
            700,
            function() {
                a("body").fadeTo("100", 1)
            })
        })
    })
});
function up() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() - 1);
    fq = setTimeout("up()", 10)
}
function dn() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() + 1);
    fq = setTimeout("dn()", 10)
}
</code>

款式二贴边滚屏

适当的位置放置在body中，

添加CSS样式，一般放在style.css中

<code>
/** Usti_Asti_Inkas_Qaytish **/
#scroll{display:block;width:15px;position:fixed;top:40%;right:0;
_position:absolute;_margin-top:300px;
_top:expression(eval(document.documentElement.scrollTop)); z-index:6}
#scroll a{display:block;float:right;width:15px;height:40px;background:url(images/scroll.png) no-repeat;cursor:pointer}
#scroll a:hover{width:45px;background:url(images/scroll.png) no-repeat}
#scroll a.scroll_t:hover{background-position:-15px 0}
#scroll a.scroll_c{background-position:0 -40px}
#scroll a.scroll_c:hover{background-position:-15px -40px}
#scroll a.scroll_b{background-position:0 -80px}
#scroll a.scroll_b:hover{background-position:-15px -80px}
</code>

这里需要一张图片

鼠标邮件保存到主题目录中的images中。

最后加入js驱动的代码

<code>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// 滚屏
jQuery(document).ready(function($){
$('.scroll_t').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('.scroll_c').click(function(){$('html,body').animate({scrollTop:$('#respond').offset().top}, 800);});
$('.scroll_b').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
});
</script>
</code>

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

款式一 鼠标碰触自动滑行

款式二 贴边滚屏

款式一鼠标碰触自动滑行

款式二贴边滚屏