jquery.scrollTo.js - 插件实现平滑滚动到页面指定位置

blogdaren 2014-08-21 抢沙发 3301人次

使用方法:

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

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

2、XHTML

<ul class="nav"> 
   <li><a href="#" class="nav_pro">产品展示</a></li> 
   <li><a href="#" class="nav_news">新闻中心</a></li> 
   <li><a href="#" class="nav_ser">服务支持</a></li> 
   <li><a href="#" class="nav_con">联系我们</a></li> 
   <li><a href="#" class="nav_job">人才招聘</a></li>  
</ul>  
<div id="pro" class="box"> 
   <h3>产品展示</h3>  </div>  <div id="news" class="box"> 
   <h3>新闻中心</h3>  </div>  <div id="ser" class="box"> 
   <h3>服务支持</h3>  </div>  <div id="con" class="box"> 
   <h3>联系我们</h3>  </div>  <div id="job" class="box"> 
   <h3>人才招聘</h3>
</div>  

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

3、CSS

.nav{width:500px;margin:20px auto;}  
.nav li{float:left; width:100px; height:24px; line-height:24px}  .box{height:500px}  
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}  
 #pro,#ser{background:url(img/bg.jpg)}  #news,#con{background:url(img/bg2.gif)}  

4、使用scrollTo.js插件

$(function(){ 
    $(".nav_pro").click(function(){ 
        $.scrollTo('#pro',500); 
    }); 
    $(".nav_news").click(function(){ 
        $.scrollTo('#news',800); 
    }); 
    $(".nav_ser").click(function(){ 
        $.scrollTo('#ser',1000); 
    }); 
    $(".nav_con").click(function(){ 
        $.scrollTo('#con',1200); 
    }); 
    $(".nav_job").click(function(){ 
        $.scrollTo('#job',1500); 
    });  
});  

当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等.

官方DEMO:

http://demos.flesler.com/jquery/scrollTo/

原文链接:

http://www.helloweba.com/view-blog-118.html

#jquery.scrollTo.js##jquery#

版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

本文链接:jquery.scrollTo.js - 插件实现平滑滚动到页面指定位置

发表评论:

您的昵称:
电子邮件:
个人主页: