软件开发培训班 >> 编程开发 >> JavaScript


ScrollTo：实现平滑滚动到页面指定位置

　　本文标签：jQuery scroll 滚动

51CTO推荐专题：jQuery给力插件大阅兵

使用方法

ScrollTo：实现平滑滚动到页面指定位置演示地址：http://www.helloweba.com/demo/scrollto/

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

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

2、XHTML

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

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

3、CSS

  1. .nav{width:500px;margin:20px auto;}   
  2. .nav li{float:left; width:100px; height:24px; line-height:24px}   
  3. .box{height:500px}   
  4. .box h3{height:32px; line-height:32px; padding-left:20px; font-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的基本方法  。其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子：http://demos.flesler.com/jquery/scrollTo/

原文链接：http://www.helloweba.com/view-blog-118.html

【编辑推荐】

  1. 3月份8个jQuery最佳插件推荐
  2. 25个超棒的jQuery日历和日期选取插件
  3. 分享10个超炫的jQuery网站
  4. 18个最新最给力的jQuery教程分享
  5. jQuery实现表格数据的动态添加与统计