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屋!