jQuery scrollTop動畫不能正常工作

Question

以下代碼會導致我的頁面奇怪地動起來。觸發此功能的事件觸發時，html/body元素會下降幾百個像素，然後緩慢滑動到瀏覽器的頂部。我需要頁面滾動到roi計算器元素的頂部。有任何想法嗎？這個相同的代碼在jsfiddle上完美工作。

var $roiCalculator = $(".roi-calculator"); 
    $(".roi-container .btn.yellow").on('click', function(){ 
     var offset = $roiCalculator.offset().top; 

     $("html, body").animate({ 
      scrollTop: $(".roi-calculator").offset().top 
     }, 3000); 

    }); 

Answer 1

的Zepto不具備的能力animate scrollTop.Since所有動畫都是通過css3完成的，所以您需要添加一個相對較小的墊片，即minified或not。開發人員意識到這個問題，正試圖爲下一個版本打補丁。

var offset = $roiCalculator.offset().top; 
// Is Zepto loaded?  
if ('__proto__' in {}) { 
    $.scrollTo({ 
     endY: offset, 
     duration: 3000, 
    // If needed 
    // callback: function() { 
    // } 
    }); 
// It's jQuery 
} else { 
    $('html, body').animate({ 
    scrollTop: offset, 
    }, 3000); 
}; 

或更好，但它抽象...

function scrollTo(offset, time) { 
    if ('__proto__' in {}) { 
     $.scrollTo({ 
      endY: offset, 
      duration: time, 
     // If needed 
     // callback: function() { 
     // } 
     }); 
    } else { 
     $('html, body').animate({ 
     scrollTop: offset, 
     }, time); 
    }; 
}; 

var offset = $roiCalculator.offset().top; 
scrollTo(offset, 3000); 

Answer 2

嘗試包內DOM ready處理$(function() {...});你的代碼，以確保所有的DOM元素已經執行jQuery代碼之前正確加載：

$(function() { 
    var offset = $roiCalculator.offset().top; 
    $("html, body").animate({ 
     'scrollTop': offset 
    }, 3000); 
});