window.scrollTo 执行问题。 单执行注释的那句没有效果，放到 window.olload 里也是一样。不知道这是什么原因

2017-10-18 09:37:07 +08:00
 Exceptionluo
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test" style="height: 3000px"></div>
</body>
<script>
    setTimeout(function () {
        window.scrollTo(0, 3000)
    });
    //window.scrollTo(0, 3000)
</script>
</html>
5133 次点击
所在节点    JavaScript
8 条回复
evolify
2017-10-18 10:35:17 +08:00
div 高度再大点，比 3000 大，试试
2bt
2017-10-18 10:47:05 +08:00
linux + chrome 61 测试有效
2bt
2017-10-18 10:48:20 +08:00
又测了一下，无效。（尴尬
Exceptionluo
2017-10-18 13:04:52 +08:00
@evolify 已经够大了，貌似和这个没得关系。
@2bt 不知道这个方法是什么运行机制
SEARCHINGFREE
2017-10-18 13:21:05 +08:00
chrome 刷新会记住位置，用 firefox ok
SakuraKuma
2017-10-18 13:44:35 +08:00
理由如#5

而且不是没有效果，是下去了，chrome 还原回来了。

如果想关闭, 把 histroy 中的 scrollRestoration 设为 manual 就可以（ chrome46+
https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
2bt
2017-10-18 17:03:35 +08:00
@SEARCHINGFREE
@SakuraKuma

大神，在上面这个基础上我又做了个测试，如果 body 高 1000px，且其中有内容的话，比如有十个<p>a</p>。
在 history.scrollRestoration ='auto'的情况下，script 为 window.scrollTo(0, 3000)。
假如滚动条是在最顶端，那么刷新时是完全没反应的。
但是如果滚动条不在顶端，刷新的时候，滚动条都会自动往下面滚动一丁点，且刷新多次，会锁定在一个地方，这个距离和浏览器视图大小有关系，也和内容多少有关系。


PS：要在本地预览，jsfiddle 上面执行都正常。
完整代码：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{height: 1000px}
</style>
</head>

<body>
<div>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</div>

<script>
window.scrollTo(0, 100);
console.log(document.body.scrollTop);
</script>
</body>
</html>
Exceptionluo
2017-10-18 17:54:33 +08:00
@2bt @SEARCHINGFREE @SakuraKuma 谢谢各位 ！
确实是被浏览器还原了。 新页面初次进入是有效的额，一旦用户改变了滚动条位置之后再刷新就没有了反应。
@2bt 不过并没有你说的如果滚动条不在顶端，刷新的时候，滚动条都会自动往下面滚动一丁点情况

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/398527

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX