scrollTo和scrollTo.js

最近做一个项目前端要用到scrollTo和滚动视觉差。顺便把两个东西拿出来温习一下。

HTML DOM里面定义了scrollTo方法，用法：scrollTo(xpos,ypos)，把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动，似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件，其中一个就能够提供平滑滚动的功能，是平滑哦~

插件叫做jquery.scrollTo.js，当然前提是首先包含jquery的库。而且它自己里面已经封装的很好了，只需要简单的调用作用在标签上的函数就能够实现平滑的滚动，用起来非常的简便。就像下面这样：

$(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的两个参数一个定义要滚动的元素对象，另一个是滚动所持续的时间，以毫秒计算。

平滑滚动只是这个插件可以实现的一个最基本的方法，可以考虑在这基础上继续去做其他的应用，比如展示文档，模拟PPT效果等等。