jquery.scrollTo插件的使用

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

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

 

$(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还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子：http://demos.flesler.com/jquery/scrollTo/