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