CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Vishnu
Vishnu

Reputation: 2452

scrolltop not working with bootstrap grids

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.

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>

Here is demo - https://jsfiddle.net/4nymvo3a/

Upvotes: 0

Views: 788

Answers (1)

BurningLights
BurningLights

Reputation: 2397

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;
}

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

Upvotes: 1

Related Questions