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

scrollTo和scrollTo.js相关推荐

scroll 和 scrollTo 的区别
项目里需要用到屏幕滚到的行为.查询api 之后发现了滚动接口中的两个.然后又很奇怪他们直接的区别,应该如何选择. 首先时mdn的解释,这里说一句,mdn此处的翻译不是特别的准确,也可能是按照功能去翻译 ...
js 跳转到指定位置高德地图_JS控制div跳转到指定的位置的几种解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: div1 div2 ...
html+css+js:简单制作米游社原神观测枢·攻略专栏
忙忙碌碌了五六天总算是整出来了这个项目,老规矩先给大家看看我的效果图. 目录效果图: 一.背景的固定二.分页器(小点)形状的改变三.运用js监听滑轮使导航背景色发生改变四.js书写点击回到顶部 ...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
一.先介绍clientHeight与scrollHeight的区别 clientHeight: 在页面上返回内容的可视高度(不包括边框,边距或滚动条) scrollHeight: 返回整个元素的高度( ...
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
概要: 原生JS基于window.scrollTo()封装垂直滚动动画工具函数,可应用与锚点定位.回到顶部等操作. ####封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有 ...
iview在ie9及以上的兼容问题解决方案
是时候亮出这张图了: 可是ie不是你不想兼容就不兼容啊.说多了都是泪. 使用iview已经有一年多的时间.总的来说,iview还是给我的工作带来了很大的方便. 主要的吐槽点就是文档写的不够清楚. 比如 ...
html button跳转页面_HTML跳转到页面指定位置的几种方法
前言有时候,我们想阅读页面中某段精彩的内容,但由于页面太长,用户需要自己滚动页面,查找起来非常麻烦 ,很容易让人失去继续往下阅读的兴趣.这样体验非常不好,所以我们可以想办法实现点击某段文字或者图片 ...
div横向滚动条_14. Selenium 处理滚动条
Selenium 处理滚动条 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的 ...
iview兼容ie8_iview在ie9及以上的兼容问题解决方案__Vue.js__JavaScript__前端__iView
是时候亮出这张图了: 可是ie不是你不想兼容就不兼容啊.说多了都是泪. 使用iview已经有一年多的时间.总的来说,iview还是给我的工作带来了很大的方便. 主要的吐槽点就是文档写的不够清楚. 比如 ...

scrollTo和scrollTo.js

scrollTo和scrollTo.js相关推荐

最新文章

热门文章