JavaScript scrollTo 方法什么都不做？答案

【问题标题】：JavaScript scrollTo method does nothing?JavaScript scrollTo 方法什么都不做？
【发布时间】：2010-11-13 13:50:09
【问题描述】：

所以我绝望地试图让一些滚动功能在页面上工作。在没有运气之后，我决定将window.scrollTo(0, 800); 粘贴在我的页面上，看看是否可以进行任何滚动。什么都不会发生。我有一个展开的手风琴，然后我想滚动到其中的特定元素。但现在我很高兴看到这个东西滚动。有人遇到这个吗？

谢谢！

【问题讨论】：

我应该注意到我已经尝试了 scrollTo JQuery 插件，但没有任何运气。 $.scrollTo(0,800);
在我的地址栏中的 Firefox 中，我只是把 javascript:window.scrollTo(0, 800);它似乎有效。
好的，一个。在不同的浏览器中尝试它，看看它是否适用于任何浏览器。湾。尝试类似 document.body.scrollTo 的东西。 C。请记住，javascript 区分大小写。不确定这些是否有帮助，但您可以尝试。
scrollTo 确实做了一些事情，只是不在您的页面上...我猜如果不发布 url、您的代码或至少提供有关您的特定问题的更多详细信息，您将得不到什么帮助。
可怕的问题。您没有提供代码，我们也不知道您的代码何时执行（如果有的话）。

标签： javascript jquery dom

【解决方案1】：

获取此代码： http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToExample.htm 并保存为 html 文件。注意它是如何硬编码一个比浏览器视口大的非常大的 div。您可能需要在页面底部添加内容才能使滚动正常工作。

【讨论】：

【解决方案2】：

首先，您的页面是否大到可以滚动（即使它在 iframe 中）？如果没有，或者您不确定，请制作一个巨大的 div，然后在其下方放置一些东西。尝试滚动到那个。

接下来，如果您在 iframe 中滚动，请将您的代码与框架源放在同一页面上。这样您就不必担心在另一个窗口中获取文档或特定元素，这可能会很棘手。哦，是的，你确定你没听错吗？逐步使用 Firebug 可以帮助您。

最后，在应该导致滚动发生的行上放置一个断点（使用 Firebug）。它是否达到了那个断点？如果没有，您的代码没有执行，滚动不是您的问题。

（我回答了这个问题，来自your earlier question 的支持上下文。）

编辑：

滚动是逐个窗口完成的。如果您处于无法滚动的框架中，则不会滚动。如果要滚动到框架中的该元素，请获取该元素到其当前窗口的偏移量，并将其添加到包含框架的偏移量。这应该可以解决问题。

【讨论】：

是的，页面有足够的高度。我可以看到滚动条。我怀疑问题与此页面的组成有关。因为这个网站是在母版页之前创建的，所以我有一个包含 2 个框架的主页。第一个是标题导航栏，另一个是内容区域。我假设这是 scrollTo 方法似乎不起作用的原因。
是的，滚动是逐个窗口完成的。如果您处于无法滚动的框架中，则不会滚动。你会疯狂地试图找出问题所在。哦...

【解决方案3】：

我能够使用 jQuery 方法 animate() 解决这个问题。这是我使用的实现示例：

$('#content').animate({ scrollTop: elementOffset }, 200);

选择器正在获取 ID = "content" 的 div。然后，我使用 scrollTop 作为选项对其应用 animate 方法。第二个参数是以毫秒为单位的动画持续时间。我希望这对其他人有帮助。

【讨论】：

我尝试了其他答案。这也是唯一对我有用的。区别在于我使用了$('body').animate({ scrollTop: top }, 0);，其中top 是包含整数y 坐标的变量。
@KimStacks 持续时间为 0 对我不起作用，但使用 1 确实如此......简直不敢相信这有多难！

【解决方案4】：

我今天遇到了同样的问题，然后我发现当我取出自动生成的文档类型块时：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

window.scrollTo(0,800) 开始与我最初尝试使用的 ExtJs scrollTo() 函数一起工作。我把块放回去，它停止工作。我不知道这是否是您遇到的问题（2 年前），但希望这可以帮助遇到同样问题的其他人。

【讨论】：

【解决方案5】：

如果你有这样的事情：

html, body { height: 100%; overflow:auto; }

如果 body 和 html 的高度定义为 100% 并且启用了滚动，则 window.scrollTo（以及所有派生的滚动机制）不起作用，尽管显示了滚动条（用户可以使用），当内容物超过了 100% 的身高。这是因为你看到的滚动条不是窗口的滚动条，而是正文的滚动条。

解决办法：

html { height: 100%; overflow:auto; }
body { height: 100%; }

【讨论】：

【解决方案6】：

我使用 setTimout 解决了这个问题。我正在使用 angularjs，但也许它也可以在 vanilla js 中提供帮助。

        setTimeout(function () {
            window.scrollTo(0, 300);
        },2);

【讨论】：

2 毫秒对我不起作用，但 200 秒。谢谢！
你救了我主人
我使用它并且工作过，但在慢速网络上它不再工作了。
0s 为我工作

【解决方案7】：

检查您的滚动条插入的标签是否出现 CSS 溢出[/-x-y]：隐藏。它修复了错误

【讨论】：

【解决方案8】：

有时不仅仅是 CSS 问题，对我来说，浏览器是罪魁祸首。我不得不用这段代码解决它：

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual'
}

它让开发者拥有滚动更改的所有权。阅读更多关于它的信息here

【讨论】：

【解决方案9】：

当window.scrollTo(x,y)在浏览器的控制台上不起作用，并且dom在滚动后被渲染时，你可以使用它。

要滚动 Splash 或任何 javascript 渲染服务，请执行以下 js：

document.body.style.height = "2000px";
window.scrollTo(0,2000);

在 Splash 中，您可以执行类似的操作：

  assert(splash:wait(10))
  assert(splash:runjs("document.body.style.height = '2000px';"))
    assert(splash:runjs("window.scrollTo(0,2000);"))
  assert(splash:wait(2))
  assert(splash:runjs("window.scrollTo(0,0);"))

【讨论】：

【解决方案10】：

我遇到了同样的问题。在 scrollTo 为我工作之前聚焦窗口。

window.focus();
window.scrollTo(0,800);

【讨论】：

【解决方案11】：

对我来说，将 html 和 body 的高度设置为 auto 就可以了。

html, body { height: auto }

【讨论】：

【解决方案12】：

这件事昨天发生在我身上，因为我在一个 div 上有 overflow: auto，它是 <html> 和 <body> 的孩子。

所以我了解到，要使window.scrollTo() 工作，您必须在<html> 元素上设置overflow: auto（或其他任何东西，overflow-y: scroll）。

我了解到，要使 document.body.scrollTo() 工作，您必须在 <body> 上设置 overflow。

我了解到您还可以使用 document.querySelector('#some-container').scrollTo() 将它用于任何其他元素（如果需要）。

就我而言，我希望 window.scrollTo() 工作，所以我将溢出 CSS 放在 <html> 上。

我很惊讶这里没有其他答案谈论“究竟哪个”元素是可滚动的。根 html 元素必须是可滚动的，window.scrollTo() 才能工作。我在<html> 下游的所有子元素都设置为height: auto。

我的 CSS 是这样的：

html { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }
body { width: 100%; height: auto; }
#app { width: 100%; height: auto; }

【讨论】：

【解决方案13】：

如果向下滑动后滚动已经完成，它应该像这样等待div完成动画

$('#div-manual-lots').slideDown(200, function () { $("html, body").animate({ scrollTop: $(document).height() }, 1000) });

【讨论】：

【解决方案14】：

这就是我在 React 上所做的，因为我有一个根元素，作为页面上第一个也是最外层的 div，我滚动到该元素的顶部。

      const root = document.getElementById('root');
      root.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });

【讨论】：

【解决方案15】：

就我而言：window.scrollBy(0,200); 正在工作。

我不知道为什么window.scrollTo(0,200); 不工作而window.scrollBy(0,200); 工作。

【讨论】：

【解决方案16】：

我遇到了这个问题，它与这些答案无关。升级到 Bootstrap 4 后，我的问题首次出现，它将我的许多 div 转换为 display: flex。事实证明，JQuery 的 scrollTop() 不适用于 flex 布局。

对我来说，解决方案是从以下位置更改我的旧代码：

$("#someId").scrollTop(1000);

// or

$("#someId").animate({ scrollTop: 1000 }, 500);

到

$("html,#someId").scrollTop(1000);

// or

$("html,#someId").animate({ scrollTop: 1000 }, 500);

唯一的区别是在需要滚动的 div 之前添加“html”。

感谢this issue 帮助我解决问题。

【讨论】：

【解决方案17】：

document.body.scrollTo(0, 800)这解决了我的问题。

【讨论】：

【解决方案18】：

使用 onunload 属性对我有用

window.onunload = function(){ window.scrollTo(0,0); }

【讨论】：

【解决方案19】：

在 React 应用程序中，使用 setTimeout 包装 window.scrollTo 是可行的。

useEffect(() => {
  if (scrollPosition > 0) {
    setTimeout(() => window.scrollTo(0, scrollPosition), 0);
    setScrollPosition(0);
  }
}, [scrollPosition]);

【讨论】：

【解决方案20】：

如果由于某种原因两者都

   html,body {overflow: hidden}

必须设置，您仍然可以通过以下方式以编程方式滚动：

   document.body.scrollTop = document.body.scrollHeight; // scrolls to bottom
   document.body.scrollTop = 0; // scrolls to top

【讨论】：