scrolltop无法与引导网格一起使用 [英] scrolltop not working with bootstrap grids

问题描述

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

I am trying to scroll into div using below code

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

这正常工作，但是当我将其与引导网格一起使用时，它只是滚动了一点.

this is working normally , but When I use it along with bootstrap grids , it is just scrolling little bit.

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

below is sample html and css I am testing

.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/

推荐答案

它不正确，因为Bootstrap网格使用浮动.因此，即使#hot的偏移量位于网格的顶部，即使它出现在第一组网格项的下方也是如此.要固定偏移量，您可以添加:

It doesn't work right because the Bootstrap grid uses floating. So, the offset for #hot is at the top of the grid, even though it appears below the first set of grid items. To fix the offset, you can add:

#hot
{
    clear: both;
}

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

to your CSS. This clears out the floating and correctly computes the offset of #hot, while not affecting the display. Here's a demo: https://jsfiddle.net/t22sxxk6/.

这篇关于scrolltop无法与引导网格一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！