原生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的 ...
随机推荐
- 洛谷 P1518 两只塔姆沃斯牛
P1518 两只塔姆沃斯牛 The Tamworth Two 简单的模拟题,代码量不大. 他们走的路线取决于障碍物,可以把边界也看成障碍物,遇到就转,枚举次,因为100 * 100 * 4,只有4个可 ...
- [LOJ] 分块九题 6
单点插入,单点查询. 优化了的链表. 链表老写错,干脆用vector,也不算慢. 注意链表退化的问题,及时(比如操作根号n次)就重新建块,实测速度可以提高一倍,这还是数据随机的情况,若涉及大量同一位置 ...
- Windows环境下安装 mysql-8.0.11-winx64 遇到的问题解决办法
下载mysql安装包,我的是下载mysql-8.0.11-winx64,解压到你想安装的目录下,然后配置环境(window环境下,mac本还没试过), 1.首先,配置环境:右击此电脑->属性-& ...
- bash实现自动补全
yum install -y bash-completion source /usr/share/bash-completion/bash_completion 执行后yum拥有选项自动补全功能 对于 ...
- Python旅途——文件操作
Python--文件操作 1.理解文件操作 可能有的时候有人会在想为什么要对文件进行操作,无论对于文件还是网络之间的交互,我们都是建立在数据之上的,如果我们没有数据,那么很多的事情也就不能够成立,比如 ...
- zoj 2722 Head-to-Head Match(两两比赛)
Head-to-Head Match Time Limit: 2 Seconds Memory Limit: 65536 KB Our school is planning to hold ...
- NYOJ27水池数目,类似于FZU1008最大黑区域,简单搜索题~~~
水池数目 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上 ...
- UVA 11090 判负圈问题
题目链接http://vjudge.net/problem/viewProblem.action?id=34650 题目大意: 给定n个点m条边的加权有向图,求平均权值最小的回路.平均权值=路径权值之 ...
- BZOJ4553 - [TJOI2016]序列
Portal Description 给出一个\(n(n\leq10^5)\)个数的数列\(\{a_n\}\)和\(m(m\leq10^5)\)个形如\((x,y)\)的变化,表示\(a_x\)可以变 ...
- 普通平衡树(bzoj 3224)
Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. 查询x数的排名(若有多个相同的数 ...