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. vs编译应用程序不依赖运行vs环境

    控制台应用程序不依赖VS运行环境就可以运行的设置: 1,使用release模式编译 2,项目属性中,“C/C++”,“代码生成”中的运行库改为“多线程(/MT)” 3,项目属性中,“链接器”,“系统” ...

  2. docker守护式容器运行管理

    docker守护式容器适合运行应用程序和服务 以交互方式进入容器  docker run -it centos /bin/bash 以交互方式进入 并设置镜像名称和运行后的主机名称 退出交互式容器并让 ...

  3. catalina配置参数

    CATALINA_OPTS="$CATALINA_OPTS -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.por ...

  4. web即时通信技术

    ajax jsonp polling setInterval定期发送ajax请求.服务器压力大,浪费流量,大部分是无效请求 ajax long polling ajax发起请求,服务器对于这个请求一直 ...

  5. scrollLeft属性设置无效的一个记录

    首先应该明确scrollLeft这个属性,只有当div中的内容长度大于当前div的长度是才能working,根据这个我我找到了一个很神奇的地方,而且我注意到这个${}连注释里面都能替换过来! 以下是正 ...

  6. C语言 NULL 是什么鬼

    NULL , 0 , '\0'  之间的区别与联系 1.NULL 结构体的使用中,都可以用NULL表示空,那么NULL是什么 #ifndef __cplusplus #define NULL ((vo ...

  7. tarjan 学习记

    1.强连通分量是什么 强连通分量指的是部分点的集合如果能够互相到达(例如 1→3,3→2,2→1(有向图)这种,132每个点都能互相抵达) 或者说,有一个环,环上点的集合就是一个强连通分量 2.那怎么 ...

  8. prototype 和function关系等总结

    js提供了一些内置类,如Array String Function等,只要有类就有原型. 1,function ,属性包括 arguments, caller,length,name ,prototy ...

  9. 安装SecureCRT注册

    注册方法 1.首先运行压缩包中的安装程序进行安装原版程序!2.安装完成后记得先不要运行程序!3.复制压缩包中的keygen.exe程序到安装目录!4.运行keygen.exe,点击Patch按钮对源程 ...

  10. Leetcode 221.最大的正方形

    最大的正方形 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出 ...