jQuery双锚点自动定位【原创】

页面的head部分，需要引入两CSS样式文件、1个jQuery库、两个javascript文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src='js/nav.js'></script>
<script type="text/javascript" src='js/xsj.js'></script>

页面的body部分，主要是3大块：顶部的置顶导航，中间的定位内容部分，右侧边栏的数字导航；代码如下：

<div class="product-box">
    <div class="nav-height" id="navHeight">
      <nav class="nav-box" id="nav-box">
        <div class="nav-mobile">点击</div>
        <ul class="clearfix">
          <li><a class="active" href="#section1">健康</a></li>
          <li><a class="" href="#section2">快乐</a></li>
          <li><a class="" href="#section3">财富</a></li>
          <li><a class="" href="#section4">自由</a></li>
          <li><a class="" href="#section5">感恩</a></li>
        </ul>
      </nav>
    </div>
    <div id="section1" name='section1' class="section-content xsj xsj1">
      <div class="product-tit">
        <i></i>
        <h3>健康</h3>
      </div>
      <ul class="product-list clear" style="height:600px;">
       营养均衡，合理运动，充足睡眠。
      </ul>
    </div>
    <div id="section2" class="section-content xsj">
      <div class="product-tit">
        <i></i>
        <h3>快乐</h3>
      </div>
      <ul class="product-list clear" style="height:600px;">
       积极向上，心情舒畅，笑口常开。
      </ul>        
    </div>
    <div id="section3" class="section-content xsj">
      <div class="product-tit">
        <i></i>
        <h3>财富</h3>
      </div>
      <ul class="product-list clear"style="height:600px;">
       努力工作，轻松赚钱，潇洒生活。
      </ul>
    </div>
    <div id="section4" class="section-content xsj">
      <div class="product-tit">
        <i></i>
        <h3>自由</h3>
      </div>
      <ul class="product-list clear" style="height:600px;">
       释放自我，缓解压力，心灵自由。
      </ul>
    </div>
    <div id="section5" class="section-content xsj" >
      <div class="product-tit">
        <i></i>
        <h3>感恩</h3>
      </div>
      <ul class="product-list clear" style="height:800px;">
       珍惜拥有，感恩一切，能量满满。
      </ul>
    </div>
  </div>
  <!-- 右侧 -->
  <div class="category-btn" id="iebug" style="left:1565px; display:none;" >
    <ul id="list">
      <li class="active 1">
        <a id="1" name="section1" href="#">1</a>
        <div class="text"><span>健康</span></div>
      </li>
      <li class="2">
        <a id="2"  href="#" >2</a>
        <div class="text"><span>快乐</span></div>
      </li>
      <li>
        <a id="3"  href="#" >3</a>
        <div class="text"><span>财富</span></div>
      </li>
      <li>
        <a id="4"  href="#" >4</a>
        <div class="text"><span>自由</span></div>
      </li>
      <li>
        <a id="5"  href="#" >5</a>
        <div class="text"><span>感恩</span></div>
      </li>
    </ul>
  </div>
  <a href="#" id="goTopBtn" ><img src="images/top.png"></a>