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. Brackets POJ - 2955

    解法 区间dp例题,每次枚举分段点的时候先更新如果开始到结束区间端点有闭合的括号,那么dp[start][end]=dp[start+1][end-1]+2其他照常枚举即可 代码 #include & ...

  2. xenserver tools 安装

    mkdir -p /mnt/xtools mount /dev/cdrom /mnt/xtools cd /mnt/xtools/Linux/ ./install.sh -n init 6

  3. 【HIHOCODER 1038】 01背包

    链接 问题描述 且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励的时刻了! 小Ho现在手上有M张奖券,而奖品区有N件奖品,分别标号为1到N,其中第i件奖 ...

  4. Codevs 1497 取余运算== 洛谷P 1226

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 输入b,p,k的值,编程计算bp mod k的值.其中的b,p,k*k ...

  5. C#.net中当地址有中文时,图片无法显示解决方法

    原文发布时间为:2008-11-05 -- 来源于本人的百度文章 [由搬家工具导入] 搞了半天都无法正常显示图片, string path = Server.MapPath("." ...

  6. ES6__函数的扩展

    /** * 函数的扩展 * 1 为函数参数指定默认值 * 2 函数的 rest 参数 * 3 箭头函数 */ // ------------------------------------------ ...

  7. input文本框的value属性在页面中不随输入的数据而变化

    今天,在做试验遇到这么一个需求: 一个input文本框,输入值后将标签传到后台,在后台解析标签,发现value仍然是初值,不是我们改变后的值. 例如: <input name="&qu ...

  8. 解决ssh无操作自动断开[转载,已经验证]

    用SSH远程,如果几分钟没有任何操作,连接就会断开,必须重新登陆才行,非常麻烦,一般修改2个地方3项即可解决问题: 1.终端键入:echo $TMOUT       如果显示空白,表示没有设置,等于使 ...

  9. POJ 1470 Closest Common Ancestors【LCA Tarjan】

    题目链接: http://poj.org/problem?id=1470 题意: 给定若干有向边,构成有根数,给定若干查询,求每个查询的结点的LCA出现次数. 分析: 还是很裸的tarjan的LCA. ...

  10. Codeforces 938G(cdq分治+可撤销并查集+线性基)

    题意: 有一个无向连通图,支持三个操作: 1 x y d : 新建一条x和y的无向边,长度为d 2 x y    :删除x和y之间的无向边 3 x y    :询问x到y的所有路径中(可以绕环)最短的 ...