scrollTop的不引導網格工作

Question

我嘗試使用下面的代碼

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

這個工作正常滾動到DIV，但是當我使用它引導格一起，它只是滾動點點。

下面

的樣本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

，因爲引導網格使用它不工作的權利浮動。所以，#hot的偏移位於網格頂部，即使它出現在第一組網格項下方。要修正偏移量，您可以添加：

#hot 
{ 
    clear: both; 
} 

到您的CSS。這將清除浮動並正確計算#hot的偏移量，但不影響顯示。這裏有一個演示：https://jsfiddle.net/t22sxxk6/。