Animate scroll jquery not working

Question

So I think I might have an idea of what my problem is -- in an effort to make my site responsive, I've used height:auto and set height using min-height:some-percentage . I understand this might not be best practice but it works and is a lot less time consuming than media queries.

So the following code for animated scroll used to work when I didn't set height using the method stated above:

$('.animate_scroll').click(function(e){
    e.preventDefault(); //I tried without this line
    var loc_id = $($(this).attr('href')),
        loc_pos = loc_id.offset().top;
    console.log($(this).attr('href')); //outputs the right div id
    console.log(loc_pos); //outputs offset greater than 0
    $('html, body').animate({scrollTop : loc_pos}, 300)
})

Anyone know what I'm doing wrong? The reason I said I think I have an idea of what my problem is is because the console.log statements above log valid values.

Update : In the code above, I've added a couple more console.log statements to get offset values. The values are different but even if I set loc_id to document.getElementById(this.getAttribute('id')).offsetTop then use that as my scrollTop value, it doesn't scroll.

console.log($(this).attr('href')); //correct id
console.log(loc_pos); //outputs 794.546875
console.log(document.getElementById(this.getAttribute('id')).offsetTop); //944

Answer 1

try this demo

  $(".jumper").on("click", function( e ) { e.preventDefault(); $("body, html").animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 2000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="pliip">pliip</div><a class="jumper" href="#ploop">Ploop</a><a id="#a_id">LINK TO MOVE</a> <div style="height:1000px;background-color:#666">div</div> <!-- Landing elements --> <a class="jumper" href="#pliip">Pliip</a> <div id="ploop">ploop</div>