使用window.scrollTo({top: 50})与使用window.scrollTo(0，50)有区别吗？

使用window.scrollTo({top: 50})与使用window.scrollTo(0, 50)是有区别的。

window.scrollTo({top: 50})是使用了新的滚动API，其中top属性指定了要滚动到的垂直位置。这种方式可以实现平滑滚动效果，即页面会平滑地滚动到指定位置。

而window.scrollTo(0, 50)是使用了旧的滚动API，其中第一个参数0表示要滚动到的水平位置，第二个参数50表示要滚动到的垂直位置。这种方式会立即将页面滚动到指定位置，没有平滑滚动效果。

因此，使用window.scrollTo({top: 50})可以实现平滑滚动效果，而使用window.scrollTo(0, 50)则是立即滚动到指定位置。具体使用哪种方式取决于需求和个人偏好。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc

相关·内容

JS滑动滚动的n种方式

1.3 浏览器的支持度 1.4 示例与推荐使用场景原始位置图我们定位如图红框的元素，从顶部开始示例 1.4.1 scrollIntoVIew() 页面滑动至父级容器，但是子项并没有被滑动到可视区域...有出现父容器滑动不到指定地方的问题，可以两次调用api（注意异步） 2 设置scrollTop/scrollLeft 2.1 基本用法 element.scrollTop=100; 当我们获取到一个元素...基本用法 window.scrollTo({ left:0, top:0, behavior:'smooth'//或'auto' }); //有效 window.scrollTo(0,0)...区别是设置behavior为'smooth'后会平滑滚动 3.2 使用说明如果场景要求我们滚动页面到某个元素的位置，此时可以使用window.scrollTo(); 如果场景要求我们滚动到某个可滚动父元素的位置...= ele.scrollTop; top && (ele.scrollTop = 0); return top > 0; }

6.3K1 0

你也许不知道的浏览器的一些滚动行为

最常用的方法： window.scrollTo(0, 0); // or window.scrollTo({ left: 0, top: 100 }); 2....也可以利用相对滚动设置： window.scrollBy(0, 0); // or window.scrollBy({ left: 0, top: 100 }); 3....或者利用scrollTop设置： document.scrollingElement.scrollTop = 100; 注意：scrollTo跟scrollBy的参数是一样的，区别就是scrollBy滚动距离是相对与当前滚动条位置进行滚动...滚动到底部 window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight }); // 如果你实在是懒的话......滚动传播指有多个滚动区域，当一个滚动区域滚动完之后，继续滚动会传播到到父区域继续滚动的行为： .box { overscroll-behavior: contain; // 阻止滚动传播 } 对比效果图如下

3K2 0

前端实战项目·优雅实现 BackTop

该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。回调的次数通常是每秒 60 次。由于兼容问题，在不同浏览器需要带上前缀，并且在浏览器不支持时使用 setTimeout 模拟。...requestAnimationFrame 目的是为了让各种网页动画效果（DOM 动画、Canvas 动画、SVG 动画、WebGL 动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果...} } const difference = Math.abs(from - to) const step = Math.ceil((difference / duration) * 50...还支持第二种参数形式，传入参数 options 是一个包含三个属性的对象： top 等同于 y-coord，代表纵轴坐标 left 等同于 x-coord，代表横轴坐标 behavior 类型 String...，表示滚动行为，支持参数 smooth(平滑滚动)，instant(瞬间滚动)，默认值 auto，效果等同于 instant window.scrollTo({ top: 0, behavior

5814 0

浅谈锚链接（native 嵌套 h5）

native 嵌套 h5 的时候，总是有很多很多的问题，例如：锚点（锚链接）项目有个需求，在native嵌套 h5 的页面，要实现锚链接，想法挺好。代码如下： <!...使用 window.scrollTo(0,1); PS ：这样做，很累，所以不推荐使用。...使用插件 scrollto.js 代码附上： <!...{margin:4px 20px; padding-top:15px; padding-left:20px; padding-bottom:10px; border-bottom:1px solid #

7041 0

滚动页面

---- 使用window.scrollBy指定页面基于当前位置的滚动偏移量。正数坐标会朝页面的右下方滚动，负数坐标会滚向页面的左上方。...ScrollToOptions包含如下三个参数： top：y轴偏移量 left：x轴偏移量 behavior：滚动行为，支持参数：smooth(平滑滚动)，instant(瞬间滚动)。...默认值auto，效果等同于instant ScrollToOptions可以作为如下方法的配置： window.scroll() window.scrollBy() window.scrollTo()...window.scroll(x-coord, y-coord) window.scroll({ top: 100, left: 100, behavior: 'smooth' }); window.scrollTo...与window.scroll相同。

2.6K3 0

js滚动到页面顶部

document.body.scrollTop; if (fromTopDistance > 0) {undefined window.requestAnimationFrame(scrollToTop); window.scrollTo...; //goto that anchor by setting the body scroll top to anchor top $('html, body').animate({scrollTop...:target_top}, 500); }); js平滑滚动到顶部,底部,指定地方采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作...}, 800);}); 如果不需要使用动画来滚动，则不需要使用到任何插件。...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。

13.3K0 0

Selenium及python实现滚动操作多种方法

方法一：使用js脚本直接操作 # 滚动到顶部 def scroll_top(self): if self.driver.name == "Chrome": js = "var q...js）这里的id为滚动条的id，但js中没有xpath的方法，所以滚动条没有id的网页此方法不适用上面展示的是上下方向的滚动条，接下来介绍左右方向的滚动条的操作方法 #左右方向的滚动条可以使用...window.scrollTo(左边距，上边距)方法 #example js=”window.scrollTo(200,1000)” driver.execute_script(js) 方法二...：使用 js 脚本拖动到指定位置 target = driver.find_element_by_id(“***”) driver.execute_script(“arguments[0].scrollIntoView...–scrollWidth 获取对象的滚动宽度 #滚动到底部 js = "window.scrollTo(0,document.body.scrollHeight)" driver.execute_script

6.2K2 1

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

从复杂的框架到处理 API，有太多的东西需要学习。但是，它也能让你只用一行代码就能做一些了不起的事情。看看这 13 句 JavaScript 单行代码，会让你看起来像个专家! 1....这意味着得到真或假的几率是 50%/50%。 ?...const randomBoolean = () => Math.random() >= 0.5; console.log(randomBoolean()); // Result: a 50/50 change...反转字符串有几种不同的方法来反转一个字符串。以下代码是最简单的方式之一。 ?...const goToTop = () => window.scrollTo(0, 0); goToTop(); // Result: will scroll the browser to the top

7961 0

总结了一些有用的 Javascript 单行代码，能快速处理一些问题

获取用户在网页上选择或突出显示的文本： console.log(getSelectedText); scrollTo(x,y)，允许你滚动到一组特定的坐标: const scrollToTop = () => window.scrollTo...(,); 如果你想要一个平滑的滚动动画，只需执行以下操作： const Top = () => window.scrollTo({top:, behavior: 'smooth'}); 获取指定时间段内通过互联网连接传输的数据量...cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`))); 反转字符串可以使用...const strReverse = str => [...str].reverse().join(''); strReverse('abc'); // cba 生成随机十六进制：使用 Math.random...str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))); console.log(capStr); 复制到剪贴板：使用

4102 0

调整合适的画布尺寸（游戏）

maxHeight) }; $("#game").css({"position":"absolute",left:0,top...event.preventDefault(); }); }); 2、去除地址栏可以使用另一个技巧来获取更多一点的页面实际使用面积...，那就是去除IOS设备上的地址栏，可以使用页面加载完之后稍稍滚动页面的招术来实现。...利用： window.scrollTo(0,1)//去除地址栏 PS：只有在页面内容长于一整页时，这一招才奏效；那么，就出现问题了，地址栏的移除还会影响所获取的页面的 innerHeight。...maxHeight) }; $("#game").css({"position":"absolute",left:0,top

1.4K3 0

分享 21 个简单实用的 JS 代码技巧

1.滚动到页面顶部我们可以使用 window.scrollTo() 平滑滚动到页面顶部。...const scrollToTop = () => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }; 2.滚动到页面底部...const scrollToBottom = () => { window.scrollTo({ top: document.documentElement.offsetHeight,...使用 scrollIntoView 就足够了。...第一种格式化货币的方法格式化钱的方式有很多种，比如这两种方式。

2406 0

13个JavaScript单行代码，让你看起来更专业

这意味着你有各50％的机会得到真或假值。...const randomBoolean = () => Math.random() >= 0.5; console.log(randomBoolean()); // Result: a 50/50 change...); console.log(isAppleDevice); // Result: will return true if user is on an Apple device 11、滚动到页面顶部 window.scrollTo...()方法将使用x和y坐标滚动到。...const goToTop = () => window.scrollTo(0, 0); goToTop(); // Result: will scroll the browser to the top

6202 0

WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式一）

本站将陆续发表几篇文章提供这几类“返回顶部、返回底部、评论”的添加方法（教程），今天提供的是在Jeff的阳台中使用的，效果如下： ? ? 你也可以到Jeff的阳台查看效果。...此“返回顶部、返回底部、评论”效果没有像本站使用的js滑动特效，但影响不大。如果你在意这个，你也可以等待后续文章更新。具体的黑色是通过css定义的，你可以改成你需要的颜色。...> <a class="gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon...right:-8px}#sticky-nav a.gotop{background-position:100% 0} #sticky-nav a.gobtm{background-position:100% 50%...建议将下载的这个gif图片使用CSS sprite与其他图片合并，以减少http请求数。

1.3K7 0

BGP与OSPF有啥区别？两种协议何时使用？

运行动态路由协议的路由器与被配置为参与的相邻路由器共享路由表信息，这些路由器使用相同的动态路由协议和路由协议实例进行通信。 BGP是如何工作的?...与BGP不同，OSPF是一种内部网关协议，在公司的私有局域网中最常使用。OSPF通常被认为比BGP更易于部署和管理，在大多数企业环境中，运行OSPF几乎不需要手动调整。...如果到远端网络有多条OSPF路径，OSPF会根据计算出的成本或度量值选择一条路径。到远端网络的路径开销是根据计算的参考带宽除以接口带宽得出的。参考带宽是OSPF中用来量化链路速度的一个指标。...OSPF使用路径带宽作为决定路径选择的主要因素，因此，与BGP相比，它更有可能根据网络性能选择最优路径。...OSPF的使用场景与BGP不同的是，运行OSPF需要大量的CPU和内存，因此，它并不适合超大型网络。

5.9K8 1

第50天：scrollTo小火箭返回顶部

20 21 22 23 我是内容部分，有很多很多 31 我是内容部分，有很多很多 32 我是内容部分，有很多很多 33 我是内容部分，有很多很多</...timer=setInterval(function(){ 64 leader=leader+(target-leader)/10; 65 window.scrollTo...:0; 31 left:50px; 32 } 33 #ol li{ 34 width: 50px; 35...timer=setInterval(function(){ 75 leader=leader+(target-leader)/10; 76 window.scrollTo

4833 0

Selenium4+Python3系列（九） - 上传文件及滚动条操作

demo.pdf" upload.send_keys(filepath) 2、非标准控件针对非标准控件，我们就要借用第三方手段来辅助完成上传文件的操作，比如键盘事件、Autolt、win32gui（与Autolt...button) 二、滚动条操作在写脚本时，总会遇到一种情况，就是当滚动拉倒最下面了，表单或者下拉框、按钮这些元素未在当前页面展示，而webdriver提供的方法都是操作当前页面可见的元素，这时我们使用...1、核心思路就是使用js去控制浏览器滚动条的位置，在使用selenium调用JavaScript操作js完成。...window.scrollTo(左边距，上边距)方法 window.scrollTo(200,1000) 2、实际案例以博客园我的文章列表页为例，来演示滚动条操作，具体代码如下： from time...(200,1000)") 以上为个人总结的一些关于滚动条操作的常用方法，更多关于js去控制滚动条的方法，有兴趣的同学可以自行尝试。

1.5K1 0

Hbuilder问题记录原

假如从列表到detail页面，detail页面需要从服务器请求数据，页面显示为不断增加内容，体验非常不好，我们往往需要在加载页面的时候采用等待框与遮罩层，等数据全部返回后，关闭等待框与遮罩层，遮罩层的样式是....mui-backdrop { position: fixed; top: 0; right: 0;...127.0.0.1/index.html 7、打包时如果显示：app打包需要将资源提交到云端服务器，连接云端服务器失败，请检查网络，如果网络没问题，先把Hbuilder关闭再重启 8、当下拉刷新与上拉加载与区域滚动..." style="top:0;padding-bottom:50px;"> 上拉加载如果被tab遮住，需要定义滚动div的padding-bottom 9、点击下面原生tab切换tab时如果需要滚到到顶部... //添加hide事件，滚到最顶部 self.addEventListener("hide",function(e){ window.scrollTo

1.8K4 0

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

7873 0

纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)

这里将为大家提供一些快速使用的万能代码。 (function() { var btnId = '__gotop'; var isIE = !!...} bindEvent('load', function() { var css = 'background-color:#999;width:50px...;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';...if (isIE && isIE < 7) { css += '_position:absolute;_top:expression(eval...= getScrollTop(); if (top > 0) { window.scrollTo(0, top

1.4K4 0

H5开发笔记

= -top + 'px' } else { bodyEl.style.position = '' bodyEl.style.top = '' window.scrollTo...function() { return this.data.data.type; } } } 5.axios post x-www-form-urlencoded 请求方式使用...: 0; left: 50%; width: 100%; height: 100%; color: #000; } .ellipsis-ghost:before { content: "";...display: block; float: right; width: 50%; height: 100%; } .ellipsis-placeholder { content: "";...; float: right; font-size: 12px; /* f */ width: 50px; /* w */ height: 18px; /* h */ margin-top:

8031 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用window.scrollTo({top: 50})与使用window.scrollTo(0，50)有区别吗？

相关·内容

JS滑动滚动的n种方式

你也许不知道的浏览器的一些滚动行为

前端实战项目·优雅实现 BackTop

浅谈锚链接（native 嵌套 h5）

滚动页面

js滚动到页面顶部

Selenium及python实现滚动操作多种方法

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

总结了一些有用的 Javascript 单行代码，能快速处理一些问题

调整合适的画布尺寸（游戏）

分享 21 个简单实用的 JS 代码技巧

13个JavaScript单行代码，让你看起来更专业

WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式一）

BGP与OSPF有啥区别？两种协议何时使用？

第50天：scrollTo小火箭返回顶部

Selenium4+Python3系列（九） - 上传文件及滚动条操作

Hbuilder问题记录原

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)

H5开发笔记

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐