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

使用方法

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

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

2、HTML

class="nav"> 
   >href="#" class="nav_pro">产品展示 
   >href="#" class="nav_news">新闻中心 
   >href="#" class="nav_ser">服务支持 
   >href="#" class="nav_con">联系我们 
   >href="#" class="nav_job">人才招聘 
 
id="pro" class="box"> 
   >产品展示 

 
id="news" class="box"> 
   >新闻中心 


 
id="ser" class="box"> 
   >服务支持 


 
id="con" class="box"> 
   >联系我们 


 
id="job" class="box"> 
   >人才招聘 


 


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

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还可以指定横向纵向滚动，传冲效果


附：

// goto
$('.province').click(function() {
var goto_id = $(this).prop('id').replace('province-', '');
$('.page').scrollTo('#goto-'+goto_id, {
axis: 'y',
offset: -55,
duration: 600,
easing: 'easeInOutExpo'
});
});

 

axis:横向X、纵向Y滚动；

offset：与上方的距离（top）；

duration：滚动速度（speech）；

easing：滚动效果