scrollTo() 和 jquery scrollTop() 在 Chrome 中不起作用

Posted 2023-05-08

【中文标题】scrollTo() 和 jquery scrollTop() 在 Chrome 中不起作用

【英文标题】：scrollTo() and jquery scrollTop() not working in Chrome

【发布时间】：2019-08-28 12:00:07

【问题描述】：

我正在制作一个使用 html 元素作为障碍的拼图平台游戏。有些级别我想从文档的底部开始。所以我尝试使用

$(document).ready(function() 
    $(document).scrollTop($(document).height() - $(window).height());

和

$(document).ready(function() 
    window.scrollTo(0, document.body.scrollHeight);

它们在 Firefox 中都可以正常工作，但在 Chrome 中都不能正常工作。我只有在为滚动设置动画时才能让它工作，这对我想要做的事情不起作用。

编辑：我没有使用 jQuery.toScroll() 我尝试了香草 toScroll 和 jQuery.scrollTop()

【问题讨论】：

请添加您遇到问题的 jQuery 和浏览器版本

$.scrollTo not working in Chrome的可能重复

【参考方案1】：

浏览器以不同的方式将滚动条附加到页面上。使用 $('html,body').scrollTop()。您还应该使用 $(window).innerHeight()。像这样……

$('html,body').scrollTop($(document).height() - $(window).innerHeight());

//Or to smooth scroll it

$('html,body').animate(
  scrollTop: $(document).height() - $(window).innerHeight()
, 1000);

注意：如果文档比窗口短，$(document).height() 将返回与 $(window).innerHeight() 相同的值。

【讨论】：

我发现问题是我使用的是 jQuery 2 :( 我不知道为什么，因为我所有的其他项目都使用最新版本。无论如何感谢您的帮助！

我还应该注意，如果文档比窗口短，$(document).height() 将返回与 $(window).innerHeight() 相同的值。出于您的目的，这无关紧要，因为目标只是滚动到底部，如果文档比窗口短，您无论如何都已经在底部了。

【参考方案2】：

我没有执行完整的测试，但至少在特定的 jQuery 版本和最新的 Chrome 上，我也通过开发者工具遇到了这个问题。 animate 确实有效。 scrollTop 和 scrollTo 都不起作用。尽管如此，即使您明确表示您不想使用 animate 我仍然推荐它，因为它正在工作，如果您像这样使用它，我认为没有理由不使用它：

$('html, body').animate(scrollTop: 500, 0);

这将滚动到 500 像素并且根本没有动画，因为持续时间设置为 0。我还必须指出 Chrome 的上一个问题：

Possible duplicate

Issue on Github

我知道这个问题已经结束，但它可能是相关的，可能应该报告它，因为有一些可疑的东西。

【讨论】：

我试过这个，当animate设置为0时它不起作用，0.1似乎起作用但它似乎不是很优雅

@Truce 0 确实有效，我在发布此答案之前尝试过，至少在我测试过的 jQuery 版本上