ScrollTo jquery平滑滚动到页面指定位置

ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO为示例讲解该插件的应用。

使用方法

1、准备jQuery库和scrollTo.js插件。

  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2. <script type="text/javascript" src="js/jquery.scrollTo.js"></script> 

2、XHTML

  1. <ul class="nav"> 
  2.    <li><a href="#" class="nav_pro">产品展示</a></li> 
  3.    <li><a href="#" class="nav_news">新闻中心</a></li> 
  4.    <li><a href="#" class="nav_ser">服务支持</a></li> 
  5.    <li><a href="#" class="nav_con">联系我们</a></li> 
  6.    <li><a href="#" class="nav_job">人才招聘</a></li> 
  7. </ul> 
  8. <div id="pro" class="box"> 
  9.    <h3>产品展示</h3> 
  10. </div> 
  11. <div id="news" class="box"> 
  12.    <h3>新闻中心</h3> 
  13. </div> 
  14. <div id="ser" class="box"> 
  15.    <h3>服务支持</h3> 
  16. </div> 
  17. <div id="con" class="box"> 
  18.    <h3>联系我们</h3> 
  19. </div> 
  20. <div id="job" class="box"> 
  21.    <h3>人才招聘</h3> 
  22. </div> 

我们用一个页面展示导航和导航对应的每个模块。

3、CSS

  1. .nav{width:500px;margin:20px auto;} 
  2. .nav li{float:leftwidth:100pxheight:24pxline-height:24px
  3. .box{height:500px
  4. .box h3{height:32pxline-height:32pxpadding-left:20pxfont-size:14px
  5. #pro,#ser{background:url(img/bg.jpg)} 
  6. #news,#con{background:url(img/bg2.gif)} 

4、使用scrollTo.js插件

  1. $(function(){ 
  2.     $(".nav_pro").click(function(){ 
  3.         $.scrollTo('#pro',500); 
  4.     }); 
  5.     $(".nav_news").click(function(){ 
  6.         $.scrollTo('#news',800); 
  7.     }); 
  8.     $(".nav_ser").click(function(){ 
  9.         $.scrollTo('#ser',1000); 
  10.     }); 
  11.     $(".nav_con").click(function(){ 
  12.         $.scrollTo('#con',1200); 
  13.     }); 
  14.     $(".nav_job").click(function(){ 
  15.         $.scrollTo('#job',1500); 
  16.     }); 
  17. }); 

当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。

转载请注明:代码家园 » ScrollTo jquery平滑滚动到页面指定位置

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)