原生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的 ...
随机推荐
- IDEA ctrl+alt+L 格式化快捷键无效时解决
这几天发现自己Intellij IDEA ctrl+alt+L格式化代码无效 设置里面按照快捷键搜索 按了 ctrl+alt+L 也没反应 但是我设置的确实是默认的 ctrl+alt+L 最后终于找到 ...
- 为ubuntu(18.04)系统启用root用户
1.使用passwd指令为root用户设置密码 2.编辑文件/usr/share/lightdm/lightdm.conf.d/50-ubuntu.confecho 'greeter-show-man ...
- fshc模块fsch2mcu_if理解
fshc2mcu_if中包括ahb2reg/ahb2fifo两个文件,都是协议转换文件.ahb2reg下游文件是reg files,ahb2fifo下游文件是fifo控制器.所有的配置和flag都是要 ...
- tornado框架基础09-cookie和session
01 cookie 在上节,我们简单了解了登录过程,但是很明显,每次都需要登录,但是在平常逛网站的只需要登录一次,那么网站是如何记录登录信息的呢? 有没有什么办法可以让浏览器记住登录信息,下次再次打开 ...
- 大数据学习——yum练习安装mysql
1. 安装mysql 服务器端: yum install mysql-server yum install mysql-devel 2. 安装mysql客户端: yum install mysql 3 ...
- loadrunner使用随机值
用户登录设置:系统用1000000001.1000000002等可以登录系统,这个代表登录的用户名
- 杭电ACM省赛集训队选拔赛之热身赛-How Many Tables,并查集模板题~~
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- Linux 修改主机名
1 vi /etc/sysconfig/network 2 vi /etc/hosts 3 hostname xxx 4 Done! 退出重连后生效
- [codevs2495]水叮当的舞步
[codevs2495]水叮当的舞步 试题描述 水叮当得到了一块五颜六色的格子形地毯作为生日礼物,更加特别的是,地毯上格子的颜色还能随着踩踏而改变. 为了讨好她的偶像虹猫,水叮当决定在地毯上跳一支轻盈 ...
- [luoguP1947] 笨笨当粉刷匠_NOI导刊2011提高(10)(DP)
传送门 f[i][j][k]表示前i行,最后一行前j个,选k次最优解 ntr[i][j][2]表示当前行区间i~j涂0或1所能刷的正确格子 #include <cstdio> #defin ...