jquery - scrolltop 不适用于 Bootstrap 网格

Question

我正在尝试使用以下代码滚动到 div

 $('html,body').animate({scrollTop:$("#hot").offset().top}, 500);

这工作正常，但当我将它与 Bootstrap 网格一起使用时，它只是滚动一点点。

下面是我正在测试的示例 html 和 css

.mybox {
  color: white;
  background: black;
  min-height: 300px;
}

..

      <div class="row">

        <h1 class="center" id="popular"> POPULAR DEALS </h1>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>

        <h1 id="hot" class='center'> HOT DEALS </h1>

        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
        <div class="mybox col-lg-4 col-xs-3">test</div>
      </div>
    </div>
    <div class="scrollhere">

    </div>

这是演示 - https://jsfiddle.net/4nymvo3a/

Answer 1

它不能正常工作，因为 Bootstrap 网格使用 float 。因此，#hot 的偏移量位于网格的顶部，即使它出现在第一组网格项的下方。要修复偏移量，您可以添加:

#hot
{
    clear: both;
}

到您的 CSS。这会清除 float 并正确计算 #hot 的偏移量，同时不会影响显示。这是一个演示:https://jsfiddle.net/t22sxxk6/ .