javascript - 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.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();