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

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

款式一 鼠标碰触自动滑行

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

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

<code>
<div id="shangxia">
    <div id="shang"></div>
    <div id="xia"></div>
</div>
</code>

把以下样式(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>

其中需要一张图片feiba,鼠标邮件保存,并放到到你博客主题的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中,

<code>
<!-- scroll -->
<div id="scroll">
<a class="scroll_t" title="Usti"></a>
<?php if(is_single() || is_page()) { ?><a class="scroll_c" title="Baha"></a><?php } ?>
<a class="scroll_b" title="Asti"></a>
</div>
</code>

添加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>

这里需要一张图片
scroll
鼠标邮件保存到主题目录中的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>

One thought on “小巧“回到顶部”的滑动块
  1. 等待思索 2012/09/12 17:16  0

    好一个折腾屋

Comments are closed.

添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。