動畫滾動jQuery不起作用

Question

因此，我想我可能對我的問題有所了解-為了使我的網站具有響應性，我使用了height:auto並使用min-height:some-percentage設置了高度。 我知道這可能不是最佳做法，但是它可以工作，並且比媒體查詢要少很多時間。

因此，當我沒有使用上述方法設置高度時，以下用於動畫滾動的代碼可以正常工作：

$('.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)
})

有人知道我在做什么錯嗎？ 我說我想知道我的問題是因為上面的console.log語句記錄了有效值。

更新 ：在上面的代碼中，我添加了更多的console.log語句以獲取偏移值。 值是不同的，但是即使我將loc_id設置為document.getElementById(this.getAttribute('id')).offsetTop this.getAttribute document.getElementById(this.getAttribute('id')).offsetTop然后將其用作我的scrollTop值，它也不會滾動。

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

試試這個演示

  $(".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>