整个页面滚动显示不同的内容-优快云博客

本文介绍了一个使用jQuery插件实现的单页滚动效果案例。通过简单的HTML结构和JavaScript调用即可达到平滑滚动并切换不同页面内容的效果。

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

整个页面滚动显示不同的内容

本例用到的js和css请到演示页面查看

 
   JavaScript Code 
  
 
   <script>  
  $(document).ready(function(){  
     $(".main").onepage_scroll({  
       sectionContainer: "section",  
       responsiveFallback: 600  
     });  
    });  
      
</script>  
 
  

 
   XML/HTML Code 
  
 
   <div class="wrapper">  
      <div class="main">  
          
      <section class="page1">  
        <div class="page_container">  
          <h1>整个页面滚动显示不同的内容</h1>  
            
            
      
        </div>  
        <img src="phones.png" alt="phones">  
      </section>  
          
        <section class="page2">  
          <div class="page_container">  
          <h1>Ready-to-use plugin</h1>  
          <h2>All you need is an HTML markup, call the script and BAM!</h2>  
          <code class="html">  
            <div class="main"><br>  
              <section>...</section><br>  
              <section>...</section><br>  
              ...<br>  
            </div>  
          </code>  
          <code class="js">  
              $(".main").onepage_scroll();  
            </code>  
          </div>  
      </section>  
          
        <section class="page3">  
          <div class="page_container">  
          <h1>本站有各种jquery效果</h1>  
  
        </div>  
      </section>  
    </div>  
</div>  
 
  