scrollTo和scrollTo.js
2023-09-17 05:57:01
最近做一个项目前端要用到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效果等等。
最新文章
- LINQ的基本认识
- javascript类型系统——包装对象
- 自定义圆形控件 RoundImageView
- 深入JVM-垃圾回收概念与算法
- Cocos2d-JS项目之二：studio基础控件的使用
- 【iHMI43 4.3寸液晶模块】demo例程（版本1.02）发布
- 十六、mysql 分区之 简单sql优化1
- 转载 SharePoint开发部署WSP解决方案包
- 数位dp入门 hdu2089 不要62
- [PHP]利用MetaWeblog API实现XMLRPC功能
- iterator的实现原理
- Spring AOP的切入点表达式
- 201521123027<java程序设计>第14周作业总结
- Linux常用命令(精选)
- (luogu P3358)最长k可重区间集问题 [TPLY]
- RecyclerView下拉刷新上拉加载（三）—对Adapter的封装
- win10 开机自启指定软件
- Kubernetes理论基础
- git clone 后误删除了分离出来的文件怎么恢复？
- 10.我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。 请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形，总共有多少种方法？