Question

我正在使用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（）

Answer 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（）相同的值。

Answer 2

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

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

由于持续时间设置为0，这将滚动到500px并且完全没有动画。我还必须指出以前的Chrome浏览器问题：

Possible duplicate

Issue on Github

我知道问题已经解决，但可能是相关的，并且可能因为某些可疑之处而应报告。

scrollTo（）和jquery scrollTop（）在Chrome中不起作用

2 个答案: