jQuery在Firefox和Chrome中滾動到底部

Question

function run_battle() {

if(battlenow.length>0) { 
var div = document.getElementById('show_battle');
    $("#show_battle").animate({ scrollTop: $("#show_battle").prop("scrollHeight") -       $('#show_battle').height() }, 100);
var attempt = battlenow.shift(); 
div.innerHTML += attempt;
    $("#show_battle").animate({ scrollTop: $("#show_battle").prop("scrollHeight") - $('#show_battle').height() }, 100);
setTimeout("run_battle()",800);
  }
}

到目前為止，這就是我所擁有的。 在Firefox中效果很好。 但是在Chrome瀏覽器中，它根本不起作用。 我正在使用Jquery 1.7.1，所以這就是為什么我使用.prop而不是.attr的原因。

Battlenow數組就是這樣。

battlenow.push('Alan hit Joe<br><br>');
battlenow.push('Joe fainted<br><br>Battle Over');

如果有幫助的話。

謝謝。

Answer 1

這是我使用的在所有瀏覽器中均可滾動到特定元素的代碼。 這段代碼滾動了最小的數量，以使元素顯示在屏幕上，您可能希望有所不同。 請注意對webkit瀏覽器的檢查：

(function($) {

  $.fn.scrollMinimal = function() {

    var cTop = this.offset().top;
    var cHeight = this.outerHeight(true);
    var windowTop = $(window).scrollTop();
    var visibleHeight = $(window).height();

    if (cTop < windowTop) {
      $(jQuery.browser.webkit ? "body": "html")
        .animate({'scrollTop': cTop}, 'slow', 'swing');
    } else if (cTop + cHeight > windowTop + visibleHeight) {
      $(jQuery.browser.webkit ? "body": "html")
        .animate({'scrollTop': cTop - visibleHeight + cHeight}, 'slow', 'swing');
    }
  };

}(jQuery));

像這樣稱呼：

$('#actions').scrollMinimal();