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网格使用浮动。因此，#hot的偏移位于网格的顶部，即使它出现在第一组网格项下方。要修复偏移量，您可以添加：

#hot
{
    clear: both;
}

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

scrolltop不使用bootstrap网格

1 个答案: