scrollTo和scrollTo.js

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

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

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

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

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