jQuery智能顶部滚动条加锚点
jQuery智能顶部滚动条加锚点，拉动滚动条试试——opera中好像把第一个锚点标题挡住了。
当前位置：编程学习 > JS >>
答案：<!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>智能滚动条tabs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/jscss/demoimg/201206/demo_system.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.clr9{ clear:both;height:9px; visibility:hidden; font-size:1px; }
/*deal_tabs样式*/
.tabs{ height:30px;line-height:30px; background:#f3f3f3; }
.deal_tabs{ position:absolute; z-index:110; margin:0; width:960px; }
.deal_tabs ul{ overflow:hidden; _height:1px; _overflow:visible; border:1px solid #CCC; background:#f2f2f2;}
.deal_tabs ul li{ float:left; display:block; width:90px; height:38px; line-height:38px; border-right:1px solid #cccccc; text-align:center; color:#333; cursor:pointer;}
.deal_tabs ul li:hover{ background:#f9f9f9; font-weight:bold; }
/*标题锚点样式*/
.title_md{ position:relative; z-index:100; height:48px; margin-top:-48px; bottom:0; width:50px; background:#cc0;}
/* 修补deal_tabs */
.fixtabs{ position:relative;z-index:-100; margin-bottom:48px; }
</style>
<script type="text/javascript" src="http://www.xuemu.net/demo/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://www.xuemu.net/demo/js/xm.jq.smartFloat.js" ></script>
<script type="text/javascript" src="http://www.xuemu.net/demo/js/jquery.scrollTo-min.js" ></script>
<script type="text/javascript">
$(function(){
//JQ绑定浮动
$("#stuff").smartFloat();
//JQ锚点
$("#to_a").click(function(){$.scrollTo($("#a"),500,{axis:"y"})});
$("#to_b").click(function(){$.scrollTo($("#b"),500,{axis:"y"})});
$("#to_c").click(function(){$.scrollTo($("#c"),500,{axis:"y"})});
});
</script>
</head>
<body>
<div style="height:100px;background:#FC0;">拉动滚动条试试——opera中好像把第一个锚点标题挡住了。</div>
<div class="clr9"></div>
<div class="wrap">
<div style="width:100%;">
<div class="fixtabs"></div>
<div class="deal_tabs" id="stuff">
<div style="height:6px;background:#f0f0f0;"></div>
<ul id="ftabs" class="ftabsul">
<li id="to_a">商品参数</li>
<li id="to_b">我要购买</li>
<li id="to_c">商品介绍</li>
</ul>
</div>
<div id="a" class="title_md"></div>
<div class="tabs"><h3><span>商品参数</span><b></b></h3></div>
<div style="border:1px solid #FF7802;">
<div style="padding:10px;">
<p>如<br>果<br>您<br>的<br>问<br>题<br>未<br>能<br>及<br>时<br>回<br>复<br></p>
<p>如<br>果<br>您<br>的<br>问<br>题<br>未<br>能<br>及<br>时<br>回<br>复<br></p>
</div>
</div>
<div class="clr9"></div>
<div id="b" class="title_md"></div>
<div class="tabs"><h3><span>我要购买</span><b></b></h3></div>
<div style="border:1px solid #FF7802;">
<div style="padding:10px;">
<p>如<br>果<br>您<br>的<br>问<br>题<br>未<br>能<br>及<br>时<br>回<br>复<br></p>
<p>如<br>果<br>您<br>的<br>问<br>题<br>未<br>能<br>及<br>时<br>回<br>复<br></p>
</div>
</div>
<div class="clr9"></div>
<div id="c" class="title_md"></div>
<div class="tabs"><h3><span>商品介绍</span><b></b></h3></div>
<div style="border:1px solid #FF7802;">
<div style="padding:10px;">
<p>如<br>果<br>您<br>的<br>问<br>题<br>未<br>能<br>及<br>时<br>回<br>复<br></p>
<p>如<br>果<br>您<br>的<br>问<br>题<br>未<br>能<br>及<br>时<br>回<br>复<br></p>
</div>
</div>
<div class="clr9"></div>
</div>
</div>
<div style="height:600px;"></div>
</body>
</html>
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。