原生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的 ...
随机推荐
- 美团技术分享:大众点评App的短视频耗电量优化实战
美团技术专栏: 关注MAYOU18 前言 美团测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试.现在大家对手机越来越依赖,而上面各App的耗电量,直接影响了 ...
- Linux用户和组的概念
目 录 第1章 用户和组存在的关系 1 1.1 我们现在所使用的操作系统都是多用户操作系统 1 1.2 id命令查看当前登陆的用户信息 1 1.3 用户UID的分类 1 1.4 ...
- win7下qt error: undefined reference to `_imp__getnameinfo@28'解决
_imp__getnameinfo@28对应着winsock2.h的getnameinfo函数 首先需要导入对应的头文件 #ifndef WIN32 #include <sys/socket.h ...
- Postfix telnet www.azengna.com 25 Connection Refused 但是localhost连接成功
修改配置文件 vi /etc/postfix/main.cf 原先配置信息 .... inet_interfaces = all #inet_interfaces = $myhostname,loca ...
- LA 4064 (计数 极角排序) Magnetic Train Tracks
这个题和UVa11529很相似. 枚举一个中心点,然后按极角排序,统计以这个点为钝角的三角形的个数,然后用C(n, 3)减去就是答案. 另外遇到直角三角形的情况很是蛋疼,可以用一个eps,不嫌麻烦的话 ...
- .NET Core 文件的上传与下载
1.前言 文件导入导出是简单且常用的功能,以下示例实现了文件上传与下载的几种方法,如有不妥的地方,欢迎指正.小白一枚,在往目标前进. 2.1.文件上传 -- 纯文件 <form ac ...
- Laya Tween循环
Laya Tween循环 @author ixenos 需求:做一个循环的缓动动画 方案: 1)如果只是线性变化,那么直接使用timer或者frameLoop来变化 2)如果需要有非线性变化,那么使用 ...
- 72.spring boot讨论群【从零开始学Spring Boot】
[从零开始学习Spirng Boot-常见异常汇总] 如果您碰到什么问题,您可以加群进行探讨,在群里有加入的都是Spring Boot志同道合的朋友: Spring Boot QQ交流群:193341 ...
- 【贪心】codeforces D. Minimum number of steps
http://codeforces.com/contest/805/problem/D [思路] 要使最后的字符串不出现ab字样,贪心的从后面开始更换ab为bba,并且字符串以"abbbb. ...
- uva12558 Egyptian Fractions (HARD version)(迭代深搜)
Egyptian Fractions (HARD version) 题解:迭代深搜模板题,因为最小个数,以此为乐观估价函数来迭代深搜,就可以了. #include<cstdio> #inc ...