跳转到下一部分 - 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的情况下你可能会遇到什么其他问题。