jQuery 中的 ScrollTop 问题（主要在 Chrome 中）答案

【问题标题】：Issues with ScrollTop in jQuery (mostly in Chrome)jQuery 中的 ScrollTop 问题（主要在 Chrome 中）
【发布时间】：2017-03-05 23:36:41
【问题描述】：

所以我在网站上使用 scrollTop 时遇到了问题。我编写了一些测试代码，并设法让它在 Firefox 中运行，但它仍然拒绝在 Chrome 中运行......我真的看不出代码有什么问题。我添加了一个 console.log() 来显示偏移量的值，这工作正常，但 Chrome 浏览器不会滚动到 id="search" 的 div。谁能看到我做错了什么？

<a href="#" id="test-btn" class="darhoudou-button">Test</a>

<div class="test-box">test1</div>
<div class="test-box">test2</div>
<div class="test-box">test3</div>
<div class="test-box">test4</div>
<div class="test-box" id="search">test5</div>
<div class="test-box">test6</div>

<script>
     $(document).ready(function(){

        $('#test-btn').on('click', function(){

            $('html, body').animate({
                scrollTop: $('#search').offset().top
            }, 200);

        });

        console.log($('#search').offset().top);         
    });
</script>

【问题讨论】：

盒子是否可以绝对定位？
你的代码在我的 Chrome 中运行良好：jsfiddle.net/mpa29552。检查控制台是否存在代码其他部分的错误
如上所述，这段代码可以正常工作：jsfiddle.net/jqfps5c4
上述代码应该可以正常工作。可以尝试使用您的代码发布小提琴。
刚才我用 chrome 测试了这个并且工作了。你的页面有足够的高度吗？也许您的 Chrome 已最大化而 FF 没有？

标签： javascript jquery scrolltop

【解决方案1】：

我测试了你的代码，没有问题。

如果您的浏览器高度为 500px，页面为 600px，则您只能滚动 100px。如果页面高度小于 500px 则没有 Scroll。

请将此<div class="test-box">test6</div> 更改为：

<div class="test-box" style="height:1000px;">test6</div>

然后看看结果，或者你可以用chrome测试这个sn-p：

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


<a href="#" id="test-btn" class="darhoudou-button">Test</a>

<div class="test-box">test1</div>
<div class="test-box">test2</div>
<div class="test-box">test3</div>
<div class="test-box">test4</div>
<div class="test-box" id="search">test5</div>
<div class="test-box" style="height:1000px;">test6</div>

<script>
     $(document).ready(function(){

        $('#test-btn').on('click', function(){

            $('html, body').animate({
                scrollTop: $('#search').offset().top
            }, 200);

        });

        console.log($('#search').offset().top);         
    });
</script>

【讨论】：

【解决方案2】：

已解决

原来是我的 css 文件导致了问题...如果其他人遇到类似的问题，我建议将所有 js 和 css 文件一一注释掉，看看是否可以修复它。这可能会帮助您查明导致问题的文件...

我的 css 的问题如下：

 html { 
    overflow: hidden;
    height: 100%;
}    


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

【讨论】：