原生js 平滑滚动到页面的某个位置
window.scrollTo()
语法1:
window.scrollTo(x-coord,y-coord)
x-coord是文档中的横轴坐标。y-coord是文档中的纵轴坐标。
例子:
window.scrollTo(0,1000); // 垂直滚动到1000的位置
语法2:
window.scrollTo(options)
top等同于y-coord- left 等同于
x-coord behavior类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
例子:
window.scrollTo({
top: 1000,
behavior: "smooth"
});
如果某个元素滚动到某个位置,也可以用以上方法:
document.querySelector('.className').scrollTo()

原生js 平滑滚动到页面的某个位置的更多相关文章
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- ScrollTo:实现平滑滚动到页面指定位置
ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- vue使用原生js实现滚动页面跟踪导航高亮
需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...
- 原生js判断手机端页面滚动停止
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...
- ScrollTo:平滑滚动到页面指定位置
使用方法 1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js&q ...
- JQuery插件:ScrollTo平滑滚动到页面指定位置
1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...
- 【web性能】js应该放在html页面的什么位置
所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 外部JS的阻塞下载 所有浏览器在下载JS的 ...
随机推荐
- loj6063 Shadow
题目描述 题解: 显然凸多面体投下来一定是个凸多边形. 对于$30$分,直接投到$x-y$平面上即可. 对于$100$分,考虑搞出平面的一般式方程$ax+by+cz+d=0$. 给出平面上三个点$A, ...
- 条款34:区分接口继承和实现继承(Different between inheritance of interface and inheritance of implemenation)
NOTE: 1.接口继承和实现继承不同.在public继承之下,derived classes总是继承base class的接口. 2.pure virtual 函数只具体指定接口继承及缺省实现继承. ...
- os操作文件
os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('dirname1') 若目录为空,则删除,并递归到上一级目录,如若也为空,则删除,依 ...
- hadoop格式化出错,提示IO异常
配置好hadoop之后,在进行格式化的时候出现异常,原因是由于在core-site.xml 配置文件中写的路径格式不对. 不需要加 file:/ 或者 file:// 直接写绝对路径就行. <c ...
- Java关于条件判断练习--统计一个src文件下的所有.java文件内的代码行数(注释行、空白行不统计在内)
要求:统计一个src文件下的所有.java文件内的代码行数(注释行.空白行不统计在内) 分析:先封装一个静态方法用于统计确定的.java文件的有效代码行数.使用字符缓冲流读取文件,首先判断是否是块注释 ...
- ACboy needs your help(分组背包)
ACboy has N courses this term, and he plans to spend at most M days on study.Of course,the profit he ...
- NYOJ760-See LCS again,有技巧的暴力!
See LCS again 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 There are A, B two sequences, the number of ele ...
- 谁才是最强战舰!-From 南京理工大学第八届程序设计大赛(校外镜像),博弈~~
谁才是最强战舰! Time Limit: 1000MS Memory Limit: 65536KB Description 依阿华来到镇守府的第一件事情,就是找大和solo!然而这并不是什么好消息,说 ...
- php中configure报错问题
https://blog.csdn.net/dodott/article/details/49664379 PHP的安装虽然有时候很简单,可是如果应用一多,我们安装起来就很头痛了!出错最多的就是安装P ...
- SeLion数据驱动中遇到的问题,以及解决方案
问题描述: 使用selion框架数据驱动时,总是test ignored. 解决方案: 把这个dataprovider方法拿出来做单元测试.有详细报错. 问题1:使用wps保存,poi包只能解析xls ...