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 平滑滚动到页面的某个位置的更多相关文章

  1. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  2. ScrollTo:实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  3. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  4. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  5. vue使用原生js实现滚动页面跟踪导航高亮

    需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...

  6. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

  7. ScrollTo:平滑滚动到页面指定位置

    使用方法 1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js&q ...

  8. JQuery插件:ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

  9. 【web性能】js应该放在html页面的什么位置

    所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.   外部JS的阻塞下载 所有浏览器在下载JS的 ...

随机推荐

  1. 美团技术分享:大众点评App的短视频耗电量优化实战

    美团技术专栏: 关注MAYOU18 前言 美团测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试.现在大家对手机越来越依赖,而上面各App的耗电量,直接影响了 ...

  2. Linux用户和组的概念

    目 录 第1章 用户和组存在的关系    1 1.1 我们现在所使用的操作系统都是多用户操作系统    1 1.2 id命令查看当前登陆的用户信息    1 1.3 用户UID的分类    1 1.4 ...

  3. win7下qt error: undefined reference to `_imp__getnameinfo@28'解决

    _imp__getnameinfo@28对应着winsock2.h的getnameinfo函数 首先需要导入对应的头文件 #ifndef WIN32 #include <sys/socket.h ...

  4. Postfix telnet www.azengna.com 25 Connection Refused 但是localhost连接成功

    修改配置文件 vi /etc/postfix/main.cf 原先配置信息 .... inet_interfaces = all #inet_interfaces = $myhostname,loca ...

  5. LA 4064 (计数 极角排序) Magnetic Train Tracks

    这个题和UVa11529很相似. 枚举一个中心点,然后按极角排序,统计以这个点为钝角的三角形的个数,然后用C(n, 3)减去就是答案. 另外遇到直角三角形的情况很是蛋疼,可以用一个eps,不嫌麻烦的话 ...

  6. .NET Core 文件的上传与下载

    1.前言 文件导入导出是简单且常用的功能,以下示例实现了文件上传与下载的几种方法,如有不妥的地方,欢迎指正.小白一枚,在往目标前进. 2.1.文件上传    --    纯文件 <form ac ...

  7. Laya Tween循环

    Laya Tween循环 @author ixenos 需求:做一个循环的缓动动画 方案: 1)如果只是线性变化,那么直接使用timer或者frameLoop来变化 2)如果需要有非线性变化,那么使用 ...

  8. 72.spring boot讨论群【从零开始学Spring Boot】

    [从零开始学习Spirng Boot-常见异常汇总] 如果您碰到什么问题,您可以加群进行探讨,在群里有加入的都是Spring Boot志同道合的朋友: Spring Boot QQ交流群:193341 ...

  9. 【贪心】codeforces D. Minimum number of steps

    http://codeforces.com/contest/805/problem/D [思路] 要使最后的字符串不出现ab字样,贪心的从后面开始更换ab为bba,并且字符串以"abbbb. ...

  10. uva12558 Egyptian Fractions (HARD version)(迭代深搜)

    Egyptian Fractions (HARD version) 题解:迭代深搜模板题,因为最小个数,以此为乐观估价函数来迭代深搜,就可以了. #include<cstdio> #inc ...