原生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的 ...
随机推荐
- Ubuntu下压缩与解压各种文件的命令
1.压缩与解压xz文件 (1)压缩 xz -z filename (2)解压 xz -d filename.xz 2.压缩与解压tar文件 (1)压缩 tar -cvf filename(压缩到 ...
- 我的MySql掉队了
本来今天高高兴兴,突然: raise MigrationSchemaMissing("Unable to create the django_migrations table (%s)&qu ...
- phpstudy里升级mysql版本到5.7
phpstudy里没有地方可以设置mysql数据库,很多人都疑惑在phpstudy里怎么升级mysql数据库版本,本文就教你如何在phpstudy中升级mysql的版本. PhpStudy集成环境中的 ...
- 4. InnoDB表单独表空间
4. InnoDB表单独表空间 从历史上看,所有InnoDB表和索引都存储在系统表空间中.这种单片方法的目标是完全专用于数据库处理的机器,精心规划的数据增长,其中任何分配给MySQL的磁盘存储都不会用 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- scrollLeft属性设置无效的一个记录
首先应该明确scrollLeft这个属性,只有当div中的内容长度大于当前div的长度是才能working,根据这个我我找到了一个很神奇的地方,而且我注意到这个${}连注释里面都能替换过来! 以下是正 ...
- jQuery对象数据缓存Cache原理及jQuery.data详解
网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几 ...
- [Go]字典(map)的操作和约束
字典(map)存储的是键值对(key-value pair,一个键值对代表了一对键和值.一个键和一个值分别代表了一个从属于某一类型的独立值,把它们两个捆绑在一起就是键值对,也称“键-元素对”)的集合 ...
- codeforces #299 div 2
(总算是5题都做完了- -) 暂时做了4题,先放一下有时间做最后一题(当然如果我真的能做出的话...)(看了大神的代码总算是理解了E题,做完发现也没那么难,果然想出一个思路的过程对于我这种弱渣来说还是 ...
- 【贪心】codeforces D. Minimum number of steps
http://codeforces.com/contest/805/problem/D [思路] 要使最后的字符串不出现ab字样,贪心的从后面开始更换ab为bba,并且字符串以"abbbb. ...