我正在尝试使用以下代码滚动到 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>
最佳答案
它不能正常工作,因为 Bootstrap 网格使用 float 。因此,#hot
的偏移量位于网格的顶部,即使它出现在第一组网格项的下方。要修复偏移量,您可以添加:
#hot
{
clear: both;
}
到您的 CSS。这会清除 float 并正确计算 #hot
的偏移量,同时不会影响显示。这是一个演示:https://jsfiddle.net/t22sxxk6/ .
关于jquery - scrolltop 不适用于 Bootstrap 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36070398/