跳轉到下一部分 - jquery

Question

我在水平佈局中工作，並嘗試使用jquery在單擊錨點時，在html部分中導航。所以當點擊跳轉到下一節。

我看到一些相同但垂直的例子！

的HTML代碼：

<div id="main"> 
    <div id="nav"> 
     <a id="prev" class="prev"> prev </a> 
      <a id="next" class="next"> next </a> 
     </div> 
     <div class="content-container"> 
     <div class="content"> 
      <section id="about" class="panel"> 

       <p>About content</p> 

      </section><!-- end about --> 

      <section id="event" class="panel"> 

       <p>Event content</p>     

      </section><!-- end event --> 

      <section id="services" class="panel"> 

       <p>Services content</p> 

      </section><!-- end services --> 

     </div><!-- end content --> 

    </div><!-- end content-container --> 
</div><!-- end main --> 

JS代碼

<script src="jquery-1.6.min.js"></script> 
<script type="text/javascript"> 

    function scrollToPosition(element) { 
      if (element !== undefined) { 
       $("#main.content-container").scrollTo(element, 700, { 
        margin: true 
       }); 
      } 
    } 

    $(function() { 

      var posts = $('.panel'); 
     var position = 0; //Start Position 
      var next = $('#next'); 
      var prev = $('#prev').hide(); 

      next.click(function(evt) { 

       prev.show(); 
       scrollToPosition(posts[position += 1]); 
       if (position === posts.length - 1) { 
         next.hide(); 
       } 
      }); 

      prev.click(function(evt) { 
       next.show(); 
       scrollToPosition(posts[position -= 1]); 
       if (position === 0) { 
         prev.hide(); 
       } 
      }); 

    }); 
</script> 

我做錯了什麼？

Answer 1

您正在使用方法scrollTo，它不是jQuery方法，而是插件方法。您沒有包含任何插件，因此代碼會在瀏覽器控制檯中拋出錯誤，並且什麼也不做。

在加載jQuery.js之前和代碼之前包含插件文件。

否則，很難說出在沒有看到你的css的情況下你可能會遇到什麼其他問題。