你在浏览别人的博客时你会发现有个非常有意思的东西,他就是快速回到顶部、回到底部的按钮,如果在加上漂亮的Jquery代码,岂不是更漂亮好看,
现在给大家分享一种飞一般的回到顶部、回到底部的按钮的方法。
款式一 鼠标碰触自动滑行
适合放在您的博客中,以自己的喜好和主题的颜色可以用Photoshop修改色调。
把以下代码放到你博客的footer.php中,这样有利于页面的加载速度。
<code>
<div id="shangxia">
<div id="shang"></div>
<div id="xia"></div>
</div>
</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>
#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>
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>
<!-- 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>
/** 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>
<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>
好一个折腾屋