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. 虚拟机如何设置静态IP

    一.本机环境 Mac.VMware Fusion 10, CentOS6.8 二.设置静态IP地址 1.选择网络连接模式,选择NAT模式 注意: 1)必须要选择NAT模式,否则你的虚拟机与主机始终会在 ...

  2. MVC Remote属性验证

    模型验证方式一: 1.需要添加引用: using System.Web.Mvc; 2.在模型属性上添加验证: [Remote("CheckIsHaveSerialNo", &quo ...

  3. 【Codeforces 1083A】The Fair Nut and the Best Path

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 我们最后要的是一条最长的路径. 这条路径的权值和是所有点的权值和-所有边的权值和且这个值最大. 显然如果我们在某一条边上的累计的权值和< ...

  4. 把以100000+4位随机码的登录账号(比如1000001234),赋予制单页面的权限,怎么写sql啊

    insert into sys_user_role (user_id,role_id,office_id)  select id,'000101100000000004UP',company_id f ...

  5. PHP基础 变量

    $a=123;$b="123";$c='456';$d=<<<a <div style=" qwerqwrqwt </div>a; / ...

  6. oracle等待事件相关查询

    --------------------------查询数据库等待时间和实际执行时间的相对百分比--------------------- select *   from v$sysmetric a ...

  7. [luoguP1186] 玛丽卡(spfa)

    传送门 因为要随机删除一条边,而枚举所有边肯定会超时,经过发现,先求出一遍最短路,而要删除的边肯定在最短路径上,删除其他的边对最短路没有影响. 所以可以先求出最短路,再枚举删除最短路上的每一条边再求最 ...

  8. Flask处理前端POST过来的JSON数据

    POST JSON数据的JS代码: $.ajax({ url:'http://127.0.0.1:5000/calc', type : 'post', dataType:'json', headers ...

  9. Catch The Caw——(广度优先搜索的应用,队列)

    抓住那头牛(POJ3278)农夫知道一头牛的位置,想要抓住它.农夫和牛都位于数轴上,农夫起始位于点N(0<=N<=100000),牛位于点K(0<=K<=100000).农夫有 ...

  10. poj——3177Redundant Paths

    poj——3177Redundant Paths      洛谷—— P2860 [USACO06JAN]冗余路径Redundant Paths Time Limit: 1000MS   Memory ...