jquery浮动层，跳转到页面指定链接。

最新推荐文章于 2021-01-15 04:31:31 发布

iteye_20685

最新推荐文章于 2021-01-15 04:31:31 发布

阅读量185

点赞数

分类专栏： php 文章标签： jQuery CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_20685/article/details/81967593

版权

php 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

修改一下JQUERY的引用位置，就可以使用了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>浮动广告</title>
<style type="text/css">
#qqonline1{
background-color:#fff;
border: 1px solid #ccc;
position:absolute;
top:100px;
right:16px;
width:100px;
padding:10px 20px;
}
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(this).scroll(function() { 
// 页面发生scroll事件时触发
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}

$("#qqonline1").css("top", 100 + bodyTop)

});
function jump(id)
{
	$(id).scrollTop(0); 
	return false;
}
</script>
</head>
<body><!-- 给BODY加个样式，让页面出现滚动条 -->
<div id="arc1" style="height:1000px;">
<h3>arc1</h3>
</div>
<form id="form1" runat="server">
</form>
<div id="arc2" style="height:1000px;">
<h3>arc2</h3>
</div>
<div id="arc3" style="height:1000px;">
<h3>arc3</h3>
</div>
<div id="qqonline1">
<a href="#arc1">ARTICLE1</a>
<a href="#arc2">ARTICLE2</a>
<a href="#arc3">ARTICLE3</a>
</div>
</body>
</html>