一、介绍
同第三款有点儿类似，只不过是另外的写作方法。不多讲了，直接用吧！
二、下载及演示
下载地址 http://git.oschina.net/hongweizhiyuan/scrolltop.git
演示地址 http://www.ijquery.cn/study/demojq/scrolltop/index.html
三：相关代码
1、HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ应用第8款：返回顶部、微信、联系我们</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="js/js.js" ></script> </head> <body style="background: #FFAF09;height:10000px;"> <div id="scrolltop"> <div id="moquu_wxin" class="moquu_wxin"> <a href="javascript:void(0)"> <div class="moquu_wxinh"></div> </a> </div> <div id="moquu_wmaps"> <a href="http://www.ijquery.cn" class='moquu_wmaps' target="_blank"></a> </div> <a id="moquu_top" href="javascript:void(0)"></a> </div> </body> </html>
2、CSS代码
#scrolltop{}
#moquu_top,#moquu_wxin,#moquu_wmaps {
z-index:2;width:50px;height:50px;right:10px;position:fixed;cursor:pointer;_position:absolute;_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))
}
/*微信及鼠标打开*/
#moquu_wxin {top:360px;_margin-top:360px}
#moquu_wxin a {background:url(../images/gotop.png) 0 -0px #ADB0B5;right:0;float:left;width:50px;height:50px;text-indent:-9999px}
#moquu_wxin a:hover {background:url(../images/gotop.png) 0px -0px #666666}
/*微信显示二维码*/
.moquu_wxin .moquu_wxinh {position:absolute;display:none;left:-120px;top:-1px;width:115px;height:115px;background:url(../images/qrcode.jpg) 0 -2px no-repeat}
.moquu_wxin a:hover .moquu_wxinh{display:block}
/*意见反馈*/
#moquu_wmaps {top:412px;_margin-top:412px}
#moquu_wmaps a {background:url(../images/gotop.png) 0 -50px #ADB0B5;width:50px;height:50px;right:0;float:left;text-indent:-9999px}
#moquu_wmaps a:hover {background:url(../images/gotop.png) -0px -50px #666666}
/*返回顶部*/
#moquu_top {top:464px;_margin-top:464px;background:url(../images/gotop.png) 0 -100px #ADB0B5;width:50px;height:50px}
#moquu_top:hover {background:url(../images/gotop.png) -0px -100px #666666}
3、JS代码
//返回顶部/start
function b() {
h = $(window).height(),
t = $(document).scrollTop(),
t > '1000' ? $("#moquu_top").show() : $("#moquu_top").hide()
}
//大于1000px显示按钮
$(window).scroll(function() {
b()
});
//动态到顶部
$(document).ready(function() {
b(), //到顶部消失
$("#moquu_top").click(function() {
$("html,body").animate({
scrollTop: 0}, 500);
return false;
})
})
//返回顶部/end