最新消息:

JQ应用第8款:返回顶部、微信、联系我们

JQuery应用 杨红伟 2015浏览

一、介绍

同第三款有点儿类似,只不过是另外的写作方法。不多讲了,直接用吧!

二、下载及演示

下载地址  http://git.oschina.net/hongweizhiyuan/scrolltop.git

演示地址  http://www.ijquery.cn/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