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. CQOI2018 九连环 打表找规律 fft快速傅里叶变换

    题面: CQOI2018九连环 分析: 个人认为这道题没有什么价值,纯粹是为了考算法而考算法. 对于小数据我们可以直接爆搜打表,打表出来我们可以观察规律. f[1~10]: 1 2 5 10 21 4 ...

  2. [POJ] 2223 Muddy Fields

    Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11490 Accepted: 4270 Description Rain has ...

  3. perl学习之:package and module

    perl的包(package)和模块(PM) ==================================包package===========================     pac ...

  4. LINUX:关于Redis集群搭建 、和搭建项目中遇到的问题

    文章来源:http://www.cnblogs.com/hello-tl/p/7804225.html 0.Redis的简单安装 1.安装redis依赖 # yum install gcc tcl g ...

  5. python全套视频十五期(116G)

    python全套视频,第十五期,从入门到精通,基础班,就业班,面试,软件包 所属网站分类: 资源下载 > python视频教程 作者:精灵 链接:http://www.pythonheidong ...

  6. C++实现链队类——合肥工业大学数据结构实验5:链式队列

    实验5 5.1 实验目的 熟练掌握队列的顺序链式存储结构. 熟练掌握队列的有关算法设计,并在链队列上实现. 根据具体给定的需求,合理设计并实现相关结构和算法. 5.2 实验要求 5.2.1链队列实验要 ...

  7. php 链接 mongodb

    1.下载phpmongodb 驱动:https://s3.amazonaws.com/drivers.mongodb.org/php/index.html 2.Precompiled binaries ...

  8. JS获取粘贴内容

    http://classjs.com/2013/03/05/js%E8%8E%B7%E5%8F%96%E7%B2%98%E8%B4%B4%E5%86%85%E5%AE%B9/ 思路:在编辑环境中,粘贴 ...

  9. Leetcode 264.丑数II

    丑数II 编写一个程序,找出第 n 个丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例: 输入: n = 10 输出: 12 解释: 1, 2, 3, 4, 5, 6, 8, 9, 10 ...

  10. javascript、jquery 、C#、sqlserveer、mysql、oracle中字符串截取的区别和用法

    下标从0开始 ,并且包括起始位 javascript 中字符串截取 : substring(Number start,Number end) var substr = "liuguangfa ...