jQuery scrollTo 无法正常工作，html 设置为 100%

Posted 2023-05-08

【中文标题】jQuery scrollTo 无法正常工作，html 设置为 100%

【英文标题】：jQuery scrollTo not working body,html set 100%

【发布时间】：2011-07-01 05:21:58

【问题描述】：

刚刚从 SO 用户那里得到了关于这个问题的一些很棒的帮助：

jQuery on window scroll animate background image position

正如您在此处看到的，我想在用户滚动页面时逐步滚动 divs 背景图像。请参阅此工作版本：

http://jsfiddle.net/nicklansdell/HFxVj/4/

给出的答案完美无缺。然而，除了能够使用浏览器滚动条滚动页面外，我还想包含一些额外的功能，当单击锚点时，将页面滚动到 divs 哈希位置。我正在使用 scrollTo 插件来实现这一点，在我包含以下 CSS 之前效果很好：

body, html 
    height: 100%;
    min-height: 100%;

不幸的是，如果我包含这个页面 scrollTo 动画不起作用但包含它允许背景图像位置动画工作，它似乎是一个或另一个，但当然我需要两个:-) 任何人都可以建议一个这里的解决方法？非常感谢。

编辑*

我已经把我的问题缩小了一点。问题与正文无关，html 被设置为高度 100%。归结为给#page div 一个物理高度。背景图像滚动需要 100% 的高度，但不需要为 scrollTo 工作指定高度。请查看我的 JSFiddle http://jsfiddle.net/nicklansdell/HFxVj/4/ 更新并尝试使用 #page 样式来了解我的意思。

【问题讨论】：

小提琴中看不到动画代码。另一方面 - 我也没有在 Html 区域看到任何内容。我应该看到吗？

@Niklas 抱歉，我正在玩弄代码，并把所有的 scrollTo 引用都拿出来了。我已将它们放回原处并缩小了问题范围，请参阅上面的编辑。

抱歉，我暂时没有任何想法，祝你好运！

【参考方案1】：

您是否使用$.scrollTo('selector-for-target-element', time); 进行滚动？对于这种语法，body 的任何一个 HTML 都需要具有自动高度。我有类似的问题，我通过明确提及需要滚动的父 div 来解决。

$('parent-div-selector').scrollTo('selector-for-target-element', time);
instead of 
$.scrollTo('selector-for-target-element', time);

它成功了。

希望对你有帮助。

【参考方案2】：

只是一个远景 - 您是否尝试将 css 应用于 body 或 html，而不是两者？

只有身体：

body  
height: 100%;
min-height: 100%;

只有 html：

html  
height: 100%;
min-height: 100%;

【讨论】：

非常感谢您的建议，但不幸的是它不起作用

【参考方案3】：

只将高度应用到正文，而不是 html。