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效果等等。

你可能感兴趣的:(jquery,插件,scrollTo)