jQuery智能顶部滚动条加锚点_菜单导航

jQuery智能顶部滚动条加锚点: 发布时间：2019-10-13编辑：脚本学堂

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>智能<a href=http://www.jb200.com/zt/gundongtiao/ target=_blank class=infotextkey>滚动条</a>tabs</title>
    <FCK: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;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>: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/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>-1.5.2.min.js"></script>
    <script type="text/javascript" src="/source/js/xm.jq.smartFloat.js" ></script>
    <script type="text/javascript" src="/source/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+CSS技术实现的Select控件效果
下一篇：CSS与JavaScript共同实现的自定义右键菜单

与 jQuery智能顶部滚动条加锚点有关的文章

本文标题：jQuery智能顶部滚动条加锚点
本页链接：http://www.jb200.com/tx/79.html

浏览排行

栏目分类

热点文章

jQuery智能顶部滚动条加锚点