jQuery - scrollTop 命令不滚动答案

【问题标题】：jQuery - scrollTop command not scrollingjQuery - scrollTop 命令不滚动
【发布时间】：2014-07-31 16:22:22
【问题描述】：

我正在网页上显示一些图像，我希望在页面加载后立即将其一直滚动到底部，然后将图像淡入。这是我的代码到目前为止的样子：

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            // fade in initial image
            $("#lower").fadeIn(3000);
            $("#lower").css("display", "block;");

            // show only initial image at mid-page
            var margin = ( $(window).height() - $("#lower").height() ) * (0.5);
            $("#lower").css("margin-top", margin);

            // set scroll position to bottom of page
            $(document).scrollTop( $(document).height() );

        });
    </script>

我的 html 看起来像这样：

<body>
    <div id="view">
        <img id="upper" src="pages/2.gif">
        <img id="lower" src="pages/1.gif">
    </div>
</body>

（#upper 的不透明度为 0，我打算稍后在用户向上滚动到图像时将其淡入）

我遇到的问题是页面在加载时不会一直滚动到底部。我尝试了很多方法，包括将 .scrollTop 函数的选择器更改为 body 和/或 html 标记以及文档或窗口。我什至尝试过度调整 scrollTop 值，但无济于事。

谁能告诉我为什么加载时页面没有一直滚动到底部？

[编辑] 对不起对不起，草率的代码。决赛周和很少的睡眠。这是具有相同问题的相同事物的无错字版本。这里我什至超调了scrollTop参数，但是结果是一样的。

观察：刷新后滚动位置仍然存在。这可能与这里顽固的滚动位置有关吗？

【问题讨论】：

您是否检查了浏览器的控制台？也许正在显示/抛出异常？
投票关闭拼写错误并拒绝对 OP 进行投票，而不是简单地检查他的控制台错误。
文档准备好并不意味着图像已经准备好，图像是否已加载并填写在文档中？如果不是在图像之前计算高度，则图像将增加文档高度。

标签： javascript jquery html scrolltop

【解决方案1】：

这里有错别字：

var margin = ($(window).hieght() - $("#lower").height())/2;
//----------------------^^^^^^^---a spelling typo

应该是：

var margin = ($(window).height() - $("#lower").height())/2;

因此，脚本执行停止，并且它永远不会进入您执行scrollTop 的行。所以总而言之，它会因错误而停止，并且不会进一步执行。

另外我想补充一点，这不是正确的做法：

$("#lower").attr("style", "display: block;")

您可以改为使用.css() 方法：

$("#lower").css("display", "block");

或者也可以使用简单的.show(), fadeIn(), .toggle('show') etc.。

【讨论】：