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);
  }
}

This is what I have so far. It works great in firefox. Yet in Chrome, it doesn’t work at all. I’m using Jquery 1.7.1, So that’s why I’m using .prop instead of .attr.

The battlenow array is like this.

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

If that helps any.

Thank you.

Answer 1

Here’s the code that I use that works in all browsers to scroll to a particular element. This code scrolls the minimal amount to get the element on screen, you might want something different. Note the check for webkit browsers:

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

Called like:

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